Javascript 丑八怪：康考特和迷你还是维切维萨？

我正在编写一个使用许多JS文件的应用程序。下划线、主干、jQuery、用于滑块的jQuery插件、用于模型、路由器、集合和视图的多个文件

在我的开发机器中，我分别加载每个文件，但在生产环境中，我只使用一个JS文件（缩小、gziped、减少http请求等）

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

---

非常感谢

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

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

为什么?

当使用jQuery等流行/通用框架时，将其托管在CDN上是有意义的，例如从缓存文件中获益-如果用户访问过同样使用jQuery的网站，他们根本不需要下载它！更不用说减少了地理延迟

---

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

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

---

但是，正如Widor告诉您的，将所有文件合并到一个文件中不是一个好主意。如果你总是在线使用你的应用程序，那么使用谷歌api（CDN）很多LIB的性能会更好

我总是把它们放在一起，然后缩小

---

我开始做的一件事是运行它，虽然首先我知道它听起来很直观，但它做的一件事是将所有字符串存储在一个数组中，好的，一个丑陋的数组，但停止字符串重复，然后当你转到缩小的，我使用Google Closure编译器，它会整理字符串，你通常会得到一个更好的缩小文件，这不会有太大的区别，因为顶级语句（和变量&c.）不会被触及

---

但是，当使用

--lift vars

选项时，可能会发生变化。这在很大程度上取决于您的代码。

我使用测试了每个方法的输出

测试设置 连接（未缩小）时，我使用了9个JavaScript文件，总大小为19.15KB。每个文件都以“使用严格”开头语句

结果：

• 连接=>Uglify:7.993KB
• Uglify=>连接：8.093KB
• 差异：0.1KB

笔记：

• Concatenate=>丑陋的条带9条中的8条

  'use strict'语句

• Uglify=>Concatenate保留所有

  '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'));
});

---

如果你有更少的全局浮动，那么顺序就没有多大关系了。将有非常小的文件大小差异。我个人的偏好是先连接，然后丑陋，这样可以生成更好、更准确的源地图，而不是反过来。（这是因为sourcemaps会随着每次转换而变化）。我想知道丑化较小的文件然后连接的目的是什么。基本上，这取决于你，选择权在你。连接和丑化似乎更令人满意，也不太容易出错

这取决于使用的算法，但通常我会先连接然后缩小。我尝试在丑化JS中实现这一技术（我的意思是分别存储字符串以避免重复）并注意到在gzip之后，压缩的文件比没有弄乱字符串的文件要大得多。我宁愿先选择combine。出于RichardJ和HotHeadMartin提到的原因，或者说更简单一点，它更安全、更有效。关于CDN，我不太相信它。另外，当你使用CDN时，你可以建立更多的并行连接。在我的例子中，我使用的是webview，因此预缓存文件的可能性为零。我先连接然后再连接丑陋，但为了理智起见，当我出现语法错误时，我认为丑陋然后连接是一个更好的方法。很好的测试，尽管在现实世界中，你永远不应该有全局“Use Strict”语句，这是一个需要处理的巨大pita。我正在考虑从Concat+Uglify切换到Uglify+Concat，因为当我遇到语法错误时，当错误字面上读到“意外标记，第19257行”时，发现它们是一件痛苦的事情