UglifyJS:concat and minify或反之亦然？

Question

我正在编写一个使用许多JS文件的应用程序.Underscore,Backbone,jQuery,用于滑块的jQuery插件,用于模型,路由器,集合和视图的多个文件.

在我的开发机器中,我分别加载每个文件,但在生产中我只使用一个JS文件(minified,gziped,less http req等).

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

非常感谢!

Answer 1

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

测试设置

当连接(未缩小)时,我使用了9个JavaScript文件,总计19.15 kB.每个文件都以一个'use strict';语句开头.

结果:

• Concatenate => Uglify:7.993 kB
• Uglify => Concatenate:8.093 kB
• 差异: 0.1 kB

笔记:

• Concatenate => Uglify剥离9个 'use strict';语句中的8个
• Uglify => Concatenate保留所有'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'));
});

Answer 2

如果这两种方式对用户请求的开销产生显着影响，我会感到惊讶。

我还建议将所有这些框架连接到一个文件中实际上可能会增加每个用户的开销。

为什么？

当使用流行/通用框架（例如 jQuery 等）时，将其托管在 CDN（例如Google）上是有意义的，这样可以从缓存文件中受益 - 如果用户访问了也使用 jQuery 的网站，他们将不需要完全下载吧！更不用说减少地理延迟了。

因此，通过创建自己的独特文件，用户更有可能必须下载整个文件。