Question

我一直在浏览很多关于how和why的文章，应该将performance的JS / CSS文件合并，但这些文章都没有提供任何真正的指导方针。当是正确的时间。

我正在开发一个单页微型网站，它使用七个Javascript文件（来自CDN和我自己的文件的第三方插件的混合），以及八个不同的CSS文件（基本上每个插件一个，我自己编译的SASS文件））。

网站甚至在内网上加载缓慢;我很担心外面的表现。在昨天搜索几个插件时，我发现了一些CodePen和插件文章基本上说“酷孩子连接JS”（literally）让我想到了这一切。

我应该在什么时候开始连接和缩小我的Javascript / CSS？

我应该将CDN脚本粘贴到我自己的JS文件中，还是从长远来看更好的是有另一个HTTP请求但是使用静态服务的插件文件？

编辑：只是为了澄清 - 我不是要求工具/技术，而是想知道何时合并和缩小文件变得很重要 - 如果总是已经完成正如@RobG建议的那样？

您应该向UAT提供尽可能接近生产代码的代码，包括文件的所有缩小和组合。如果你不这样做，那么你没有做正确的UAT

Answer 1

说实话，这取决于。人们往往错误地痴迷于合并......但情况并非总是如此。 merge-min的需要取决于以下几点：有时加载2个css文件比一个大文件更快更好？为什么？因为它们会并行加载。那很简单。

所以不要选择合并最小的痴迷。如果您的用户返回，每日用户，请合并并依赖浏览器缓存。如果不是，则通过不合并来优化并行负载。

忽略这种简单化：'是的，你必须合并，因为这是10年前最好的，我从来没有质疑过它'：）

Answer 2

我应该何时合并我的JS和CSS文件？

每次完成开发。特别是当您的代码进入用户验收测试（UAT）时，如果不是更早。感谢@RobG提及它。

您建议使用哪些工具？

Browserify

让我们从您的JS文件开始。我认为捆绑各种JS文件/模块的一个很好的工具是Browserify。

浏览器没有定义require方法，但Node.js确实如此。使用Browserify，您可以编写使用require的代码，方法与在Node中使用它的方式相同。

这是一个关于如何在命令行上使用Browserify捆绑一个名为main.js的简单文件及其所有依赖项的教程：

var unique = require('uniq');
var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];
console.log(unique(data));

使用npm：

安装uniq模块

npm install uniq

现在使用browserify命令递归地将从main.js开始的所有必需模块捆绑到一个名为bundle.js的文件中：

browserify main.js -o bundle.js

Browserify解析AST for require（）调用以遍历项目的整个依赖关系图。将单个标记放入html中即可完成！

<script src="bundle.js"></script>

还有一个名为browserify-css的CSS文件的工具模拟器。

咕嘟咕嘟

gulp是一个工具包，可帮助您在开发工作流程中自动执行痛苦或耗时的任务。对于Web开发（如果这是你的事情）它可以帮助你做CSS预处理，JS转换，缩小，实时重新加载等等。所有主要IDE都集成了集成，人们可以熟悉PHP，.NET，Node.js，Java等等。有超过1700个插件（并且你可以在没有插件的情况下做很多插件），gulp可以让你放弃搞乱构建系统并重新开始工作。

公共CDN脚本

我应该将CDN脚本粘贴到我自己的JS文件中，还是从长远来看更好的是有另一个HTTP请求但是使用静态服务的插件文件？

您可以将它们保存在公共CDN中;为了避免不必要地使服务器过载，浏览器限制了可以同时进行的连接数。根据哪个浏览器，此限制可能低至每个主机名两个连接。使用公共CDN（如Google AJAX Libraries CDN）可以消除对您网站的一个请求，允许您并行下载更多本地内容。 Read more on this here

我何时应该合并我的JS和CSS文件？

2 个答案:

Browserify

咕嘟咕嘟

公共CDN脚本