Javascript 我应该什么时候合并JS和CSS文件？

我在这里浏览了很多关于JS/CSS文件的文章，其中一篇应该结合JS/CSS文件，但是这些文章都没有提供任何关于何时是正确时间的真正指导

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

---

即使在这里的内部网上，站点的加载速度也很慢；我很关心外面的表演。昨天在搜索几个插件的时候，我发现了几篇代码笔和插件文章，基本上都写着“酷孩子连接JS”（cool kids concatenate JS），这让我想到了整件事

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

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

编辑：我只是想澄清一下-我不是在要求工具/技术，而是想知道什么时候合并和缩小文件变得重要-是否应该一直按照@RobG的建议进行

---

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

我应该什么时候合并JS和CSS文件

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

你建议使用哪些工具

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

浏览器没有定义require方法，但Node.js有。使用Browserify，您可以编写使用require的代码，就像在Node中使用require一样

以下是关于如何在命令行上使用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>



还有一个类似CSS文件的工具，名为

吞咽
是一个工具包，它将帮助您自动化开发工作流中痛苦或耗时的任务。对于web开发（如果这是您的事情），它可以通过CSS预处理、JS传输、缩小、实时重新加载等等来帮助您。集成被内置到所有主要的IDE中，人们喜欢在PHP、.NET、Node.js、Java等多个应用程序中实现。gulp拥有1700多个插件（没有插件你可以做很多），它可以让你停止干扰构建系统，重新开始工作

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

您可以将它们保存在公共CDN中；为了避免不必要的服务器过载，浏览器限制了可以同时进行的连接数量。根据浏览器的不同，此限制可能低至每个主机名两个连接。
使用公共CDN（如Google AJAX库CDN）可以消除对站点的一个请求，从而允许并行下载更多本地内容
 老实说，这要看情况而定。
人们常常错误地沉迷于合并-最小。。。情况并非总是如此。merge min的需要取决于以下几点：
有时加载两个css文件比加载一个大的css文件更快更好？为什么？因为它们将并行加载。那很简单

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

忽略过于简单的一句话：“是的，你必须合并，因为这是10年前最好的，我从来没有质疑过：）
性能瓶颈很难发现。连接和缩小不是“何时”的问题。您应该只在生产环境中这样做，因为这是一种简单的性能提升和非常好的实践。CDN很好，因为它们缓存得很好，所以不要担心这些，除非你需要离线工作，这在很多情况下是一件值得努力的事情，所以这取决于你的网站。请记住，一个单一的阻止功能，或者一个巨大的图像请求，会比未配置的、未链接的代码造成更大的伤害。“即使在这里的内联网上，网站的加载速度也很慢”——那么为什么它会慢呢？@ArashMilani，3年前的时候？在一个工具和实践在一个月内就过时的行业中？别这么认为。是的，离开你的CDN。减少浏览器请求瓶颈等。您应该向UAT交付尽可能接近生产代码的代码，包括所有文件的缩小和组合。如果您不这样做，那么您就没有进行正确的UAT。