javascript UglifyJS：连接和缩小或反之亦然？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10983636/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
UglifyJS: concat and minify or viceversa?
提问by fedeisas
I'm writing an app that uses many JS files. Underscore, Backbone, jQuery, jQuery plugins for sliders, several files for models, routers, collections and views.
我正在编写一个使用许多 JS 文件的应用程序。下划线、主干、jQuery、滑块的 jQuery 插件、模型、路由器、集合和视图的几个文件。
In my dev machine, I load every file separately, but in production I use only one JS file (minified, gziped, less http req, etc.).
在我的开发机器上，我分别加载每个文件，但在生产中我只使用一个 JS 文件（缩小、gzip 压缩、减少 http 请求等）。
In my build process, each file in minified with UglifyJS and then concat into prod.js. Is this the correct way to build that file? Or should I concat each file into prod.js and then minify with UglifyJS?
在我的构建过程中，每个文件都用 UglifyJS 缩小，然后连接到 prod.js。这是构建该文件的正确方法吗？或者我应该将每个文件连接到 prod.js 中，然后使用 UglifyJS 进行缩小？
Thanks a lot!
非常感谢！
回答by Tyler Eich
I tested the output of each method using Gulp.
我使用Gulp测试了每种方法的输出。
Test Setup
测试设置
I used 9 JavaScript files totaling 19.15 kBwhen concatenated (not minified). Each file starts with a 'use strict';statement.
连接（未缩小）时，我使用了 9 个 JavaScript 文件，总大小为19.15 kB。每个文件都以一个'use strict';语句开头。
Results:
结果：
- Concatenate => Uglify: 7.993 kB
- Uglify => Concatenate: 8.093 kB
- Difference:0.1 kB
- 连接 => 丑化：7.993 kB
- 丑化 => 连接：8.093 kB
- 差异：0.1 kB
Notes:
笔记：
- Concatenate => Uglify strips 8 of the 9
'use strict';statements - Uglify => Concatenate preserves all
'use strict';statements - A single
'use strict';statement is 13 bytes. 8 × 13 bytes = 104 bytes, which accounts for the 0.1 kB difference.
- 连接 => 丑化9 条
'use strict';语句中的8条 - Uglify => Concatenate 保留所有
'use strict';语句 - 单个
'use strict';语句是13 个字节。8 × 13 字节 = 104 字节，这说明了 0.1 kB 的差异。
Final Thoughts:
最后的想法：
Use whichever order you prefer.
使用您喜欢的任何顺序。
The difference between these two processes is negligible. Concatenate => Uglify could (theoretically) produce (barely noticeably) smaller files if both of the following are true:
这两个过程之间的差异可以忽略不计。Concatenate => Uglify 可以（理论上）产生（几乎不明显）更小的文件，如果以下两个都成立：
- Several of the individual files start with a
'use strict';statement - There are manyindividual files
- 几个单独的文件以一个
'use strict';语句开头 - 有很多单独的文件
Here's the gulpfile.jsI used:
这是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'));
});
回答by Widor
I'd be surprised if either way round made a significant difference to the overhead of a user's request.
如果任何一种方式对用户请求的开销产生重大影响，我都会感到惊讶。
I'd also suggest that concatenating all these frameworks into one file may actually increasethe overhead for each user.
我还建议将所有这些框架连接到一个文件中实际上可能会增加每个用户的开销。
Why?
为什么？
When using a popular/common framework such as jQuery etc. it makes sense to host it on a CDN, such as Googleto benefit from caching the file - if a user's visited a website that also made use of jQuery they won't need to download it at all! Not to mention decreased geographic latency.
当使用流行/通用框架（例如 jQuery 等）时，将其托管在 CDN（例如Google）上以从缓存文件中受益是有意义的 - 如果用户访问的网站也使用了 jQuery，则他们不需要下载吧！更不用说减少地理延迟了。
So, by creating your own unique file you're making it much more likely that the user will have to download the entire thing.
因此，通过创建您自己的独特文件，您更有可能让用户不得不下载整个文件。
回答by Martin Borthiry
I strongly recommend you use requirejs, using that lib you can make packages or one minimized and unified file. Please read the optimization tool.
我强烈建议您使用requirejs，使用该库您可以制作包或一个最小化和统一的文件。请阅读优化工具。
However, as Widor told you, It's not a good idea join ALL the files into one. Many of those libs performs better using the google api (CDN) if you always will use your app online
但是，正如 Widor 告诉您的那样，将所有文件合并为一个并不是一个好主意。如果您总是在线使用您的应用程序，那么使用 google api (CDN) 时，其中许多库的性能会更好
回答by HotHeadMartin
I would alway put them all into one then minify.
我总是把它们合二为一然后缩小。
One thing i have started doing is to run it though http://www.javascriptobfuscator.com/first i know it sounds count-intuitive but one of the things it does is store all string in an array ok an ugly array but stops string repetition then when you go to Your minified, i use Google Closure compiler it will then tidy the strings up and you often end up with a better minified file
我已经开始做的一件事是运行它虽然http://www.javascriptobfuscator.com/首先我知道这听起来很直观，但它所做的一件事是将所有字符串存储在一个数组中，一个丑陋的数组，但停止字符串重复然后当你去你的缩小时，我使用谷歌闭包编译器它会整理字符串，你通常会得到一个更好的缩小文件
回答by RichardJ
It won't make much difference, since the toplevel statements (and variables &c.) aren't touched.
它不会有太大区别，因为顶级语句（和变量等）没有被触及。
However, when using the --lift-varsoption, it could change. It depends heavily on your code.
但是，在使用该--lift-vars选项时，它可能会发生变化。这在很大程度上取决于您的代码。
回答by Ankit Tanna
Order would not matter much assuming you have less globals floating around. There would be very minimal file size difference. My personal preference is to Concatenate and then Uglify which allows you to generate better and accurate sourcemaps rather than other way round. (This is because sourcemaps change with each transformation). I am wondering what is the purpose of uglifying smaller files and then concatenating. Basically, it is up to you and choice is yours. Concatenating and Uglifying seems more satisfactory and less error prone
假设您的全局变量较少，那么订单就无关紧要了。文件大小差异非常小。我个人的偏好是 Concatenate 然后 Uglify，它可以让您生成更好、更准确的源地图，而不是其他方式。（这是因为源映射随每次转换而变化）。我想知道丑化较小文件然后连接的目的是什么。基本上，这取决于您，选择权在您。连接和丑化似乎更令人满意，更不容易出错
