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测试了每种方法的输出。

测试设置

当连接（未缩小）时，我使用了总共​​ 19.15 kB 的9个JavaScript文件。每个文件都以'use strict';语句开头。

结果：

• Concatenate =＆gt; Uglify： 7.993 kB
• Uglify =＆gt;连接： 8.093 kB
• 差异： 0.1 kB

说明：

• Concatenate =＆gt; Uglify剥离了9个 'use strict';语句中的 8
• Uglify =＆gt; Concatenate保留所有'use strict';语句
• 单个'use strict';语句 13个字节。 8×13字节= 104字节，占0.1 kB的差异。

最后的想法：

使用您喜欢的顺序。

这两个过程之间的差异可忽略不计。 Concatenate =＆gt;如果以下两种情况都成立，则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他们根本不需要下载它！更不用说降低地理延迟了。

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

Answer 3

我强烈建议您使用requirejs，使用该库可以创建包或一个最小化和统一的文件。请阅读优化工具。

然而，正如Widor告诉你的那样，将所有文件合并为一个并不是一个好主意。如果你总是在线使用你的应用程序，那么很多这些lib使用google api（CDN）表现更好

Answer 4

我总是将它们全部放入一个然后缩小。

我开始做的一件事是运行它虽然http://www.javascriptobfuscator.com/我首先知道这听起来很直观，但其中一件事就是将所有字符串存储在一个数组中，这是一个丑陋的数组，但是会阻止字符串重复然后当你进入你的缩小时，我会使用谷歌闭包编译器，然后它将整理字符串，你经常会得到一个更好的缩小文件

Answer 5

它没有多大区别，因为不会触及顶层语句（和变量＆amp; c。）。

但是，使用--lift-vars选项时，它可能会发生变化。这在很大程度上取决于您的代码。

Answer 6

假设您的全局变量较少，则顺序无关紧要。文件大小差异非常小。我个人的偏好是Concatenate然后是Uglify，它允许你生成更好和准确的源图，而不是其他方式。 （这是因为源图会随着每次转换而改变）。我想知道uglifying较小的文件然后连接的目的是什么。基本上，这取决于你和你的选择。连接和丑化似乎更令人满意，更不容易出错