javascript - UglifyJS:连接和缩小或反之亦然？

Question

我正在编写一个使用许多 JS 文件的应用程序。 Underscore、Backbone、jQuery、 slider 的 jQuery 插件、模型、路由器、集合和 View 的几个文件。

在我的开发机器中，我分别加载每个文件，但在生产中我只使用一个 JS 文件(缩小、gziped、较少的 http req 等)。

在我的构建过程中，每个文件都用 UglifyJS 缩小，然后连接到 prod.js。这是构建该文件的正确方法吗？或者我应该将每个文件连接到 prod.js 中，然后用 UglifyJS 缩小？

非常感谢!

Answer 1

我使用 Gulp 测试了每种方法的输出.

测试设置

我使用了 9 个 JavaScript 文件，总共 19.15 KB 连接时(未缩小)。每个文件都以 'use strict'; 开头陈述。

结果:

连接 => 丑化: 7.993 KB

丑化 => 连接: 8.093 KB

区别: 0.1 KB

笔记:

连接 => Uglify strip 9 个中的 8 个 'use strict';声明

Uglify => 连接保留所有 'use strict';声明

单'use strict';声明是 13 字节 . 8 × 13 字节 = 104 字节，这说明了 0.1 kB 的差异。

最后的想法:

使用您喜欢的任何顺序。

这两个进程的区别是 可以忽略不计 .如果以下两个都为真，则 Concatenate => Uglify 可以(理论上)产生(几乎不明显)较小的文件:

几个单独的文件以 'use strict'; 开头声明

有很多单独的文件

这是 gulpfile.js我用了:

var gulp = require('gulp'),
  concat = require('gulp-concat'),
  uglify = require('gulp-uglify');

var files = [
  '!app/scripts/**/*Spec.js', // Exclude test files
  'app/scripts/**/*.js'
];

// Register tasks
gulp.task('concat-min', function() {
  return gulp.src(files)
    .pipe(concat('script.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

gulp.task('min-concat', function() {
  return gulp.src(files)
    .pipe(uglify())
    .pipe(concat('script.min.js'))
    .pipe(gulp.dest('dist'));
});