19

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

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

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

非常感谢！

4

6 回答 6

23

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

测试设置

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

结果：

  • 连接 => 丑化：7.993 kB
  • Uglify => 连接：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'));
});
于 2014-04-24T21:10:58.047 回答
2

如果任何一种方式都对用户请求的开销产生了重大影响，我会感到惊讶。

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

为什么？

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

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

于 2012-06-11T16:11:51.593 回答
1

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

但是，正如 Widor 告诉您的，将所有文件合并为一个并不是一个好主意。如果您总是在线使用您的应用程序，那么其中许多库使用 google api (CDN) 性能会更好

于 2012-06-11T16:19:38.703 回答
1

我总是将它们全部合二为一，然后缩小。

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

于 2012-06-11T16:45:46.700 回答
0

它不会有太大的区别，因为顶层语句（和变量等）没有被触及。

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

于 2012-06-13T10:20:46.067 回答
0

假设您的全局变量较少，订单就无关紧要了。文件大小差异非常小。我个人的偏好是先 Concatenate，然后是 Uglify，这样您就可以生成更好、更准确的源图，而不是其他方式。（这是因为源映射随每次转换而变化）。我想知道丑化小文件然后连接的目的是什么。基本上，这取决于您，选择权在您手中。连接和丑化似乎更令人满意且不易出错

于 2016-12-21T12:07:58.777 回答