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

Posted 2023-03-10

【中文标题】什么时候应该合并我的 JS 和 CSS 文件？

【英文标题】：When Should I Combine my JS and CSS Files?

【发布时间】：2015-10-28 22:18:20

【问题描述】：

我在这里浏览了很多关于 how 和 why 的文章，其中一篇文章应该为 performance 结合 JS/CSS 文件，但这些文章都没有提供任何关于何时 em> 是正确的时间。

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

即使在此处的 Intranet 上，网站也加载缓慢；我担心外面的表现。昨天在搜索几个插件时，我发现了几篇 CodePen 和插件文章，基本上都是说“cool kids concatenate JS”(literally)，这让我想到了整个事情。

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

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

编辑：只是澄清一下 - 我不是要工具/技术，而是想知道何时合并和缩小文件变得重要 - 是否应该总是正如@RobG 所建议的那样？

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

【问题讨论】：

性能瓶颈很难发现。连接和缩小不是“何时”的问题。您应该只为生产环境执行此操作，因为这是一种简单的性能提升和非常好的实践。 CDN 很棒，因为它们可以很好地缓存，所以除非您需要您的站点离线工作，否则不要担心这些，这在许多情况下是一件好事，所以这取决于。请记住，一个阻塞函数或一个巨大的图像请求会比未压缩、未连接的代码造成更大的伤害。

"这里的网站加载也很慢" --- 那为什么会很慢？

3 年前的@ArashMilani？在一个工具和实践在一个月内就过时的行业中？不这么认为。

是的，别管你的 CDN。减少浏览器请求瓶颈等等。

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

【参考方案1】：

说实话，这取决于。 人们经常错误地沉迷于合并最小……情况并非总是如此。对 merge-min 的需求取决于以下几点： 有时加载 2 个 css 文件比加载一个大文件更快更好？为什么？因为它们会并行加载。就这么简单。

所以不要执着于合并最小值。如果您的用户正在返回，日常用户，请合并并依赖浏览器缓存。如果不是，请通过不合并来优化并行加载。

忽略简单化：'是的，你必须合并，因为这是 10 年前最好的，我从未质疑过':)

【参考方案2】：

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

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

您建议使用哪些工具？

浏览

让我们从您的 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 为 require() 调用解析 AST 以遍历项目的整个依赖关系图。 将单个标签放入您的 html 中，您就完成了！

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

还有一个用于 CSS 文件的类似工具，名为 browserify-css。

吞咽

gulp 是一个工具包，可帮助您在开发工作流程中自动执行痛苦或耗时的任务。对于 web 开发（如果那是你的事），它可以通过 CSS 预处理、JS 转译、缩小、实时重新加载等等来帮助你。所有主要的 IDE 都内置了集成，人们喜欢跨 php、.NET、Node.js、Java 等的 gulp。 gulp 拥有超过 1700 个插件（并且您可以在没有插件的情况下做很多事情），gulp 可以让您摆脱构建系统的困扰并重新开始工作。

公共 CDN 脚本

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

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