合并和压缩多个CSS / JS文件

Question

我试图通过合并和压缩CSS和JS文件来优化网站性能。我的问题更多是关于如何在面对实际情况时（尽管这应该是其他开发人员普遍遇到的情况），实现这一目标的具体步骤。

我的页面引用了类似以下的几个CSS和JS文件:

<!--
  It's easier to work on smaller files during development.
  Hence, the multiple CSS and JS files.
-->
<link type="text/css" rel="stylesheet" href="/css/main.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-1.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-2.css" />

<script type="text/javascript" src="/scripts/js/main.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/adapter.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/title-adapter.js"></script>

对于生产版本，我想将3个CSS文件合并为一个，并使用例如YUI Compressor进行缩小。但是，我需要更新所有需要这3个文件的页面以引用新缩小的CSS。这似乎容易出错（例如，在许多文件中删除和添加某些行）。还有其他不那么冒险的方法吗？JS文件也有同样的问题。

- moey

---

我希望在新的asp.net 4.5中引入这样的功能，以便在“调试”中单独呈现和未被压缩的脚本，但在“发布”中它们被合并和压缩。 - Daniel Powell

Answer 1

看看minify吧——它可以通过将多个js、css文件堆叠到一个url中来使它们合并成一个文件。

<script src="/scripts/js/main.js,/scripts/js/adapter/adapter.js"></script>

我们已经使用它多年了，它的工作非常出色，而且是即时完成的（无需编辑文件）。

- Noodles

---

嗨，Noodles，对我来说它不起作用。它给我一个404错误，指向那个脚本引用地址。我使用了"<script src="http://test.com/script1.js,http://test.com/script2.js"></script>"，所有的js文件都报告加载错误。 - Heemanshu Bhalla

Answer 2

我认为YUI Compressor是最好的压缩工具。它可以压缩JS和CSS，甚至可以去除那些用于低级JavaScript调试的console.log语句。

看看它有多容易使用。

你可以在ant任务中启动它，因此如果你使用svn/git，可以将其包含在你的提交前/后钩子中。

更新：现在我使用grunt与concat、minify和uglify插件。你可以使用它来监视源代码的变化并在后台创建新的压缩文件。 uglify插件不仅可以去除console日志，还可以去除未使用的函数和属性。

请参阅本教程以获得简要的了解。

更新：

现在人们已经放弃了grunt及其前身“gulp”，转而使用npm作为构建工具。可以在这里了解更多相关信息。

更新：（更新于2023年3月6日）

现在人们使用yarn来运行npm。毫不奇怪，yarn的图标是一只猫。

大多数当前的框架都使用类似webpack或vite的工具将资源打包成包，并且还会进行minification处理。

如果您仍需要手动完成此操作，至少应使用诸如yarn或npm之类的运行程序，然后选择像minify和可能combine-files这样的工具。

- Andresch Serj

---

目前它还不支持最小化CSS文件，尽管这是YUI Compressor的一个功能。 - Songo

在YUI Compressor网站上，它写道：“YUI Compressor还能够通过使用Isaac Schlueter基于正则表达式的CSS压缩器的端口来压缩CSS文件。” 另外请参考：http://yui.github.io/yuicompressor/css.html - Andresch Serj

非常感谢对工作流解决方案的优秀历史的关注，期待着下一次更新！ - gdbj

有更新吗？现在人们都做什么？ - Xsmael

@Xsmael：我添加了一个更加当前的更新。 - Andresch Serj

我再次更新了这篇文章，为那些仍需要手动压缩的人提供帮助。 - Andresch Serj

Answer 3

我需要更新所有需要使用这3个文件的页面，使它们引用新的压缩CSS文件。

首先，建议您拥有一个公共的页头。这样每当需要时就无需更改所有页头。将单一的页头或2-3个作为最佳实践。因此，无论何时您要扩展您的 web 应用程序，都会更少出现风险和繁琐。

您没有提及您的开发环境。您可以看到有不同开发环境下列出的许多压缩工具。而且您正在使用很好的工具即 YUI Compressor。

- Somnath Muluk

Answer 4

Windows用户的快速提示：如果您只想要合并文件：

在所需位置打开命令提示符，然后使用 "type" 将文件导入文件中。

例如：

type .\scripts\*.js >> .\combined.js

如果您的脚本顺序很重要，您必须明确地按所需顺序键入文件.

我在我的Angular/Bootstrap项目的批处理文件中使用this

del combos.js

type .\lib\jquery.min.js >> .\combos.js
type .\lib\bootstrap.min.js >> .\combos.js
type .\lib\Angular\angular.min.js >> .\combos.js
type .\lib\Angular\angular-route.min.js >> .\combos.js
type .\lib\Angular\angular-sanitize.min.js >> .\combos.js

type .\app.js >> .\combos.js
type .\services\*.js >> .\combos.js
type .\controllers\*.js >> .\combos.js

- mpx

---

我找到了一个最简单的方法/概念，即使我使用完全不同的语言也应该完美地工作。现在我的想法是将其转换为一种缓存文件，并让页面调用它。谢谢。 - jacktrader

Answer 5

我最终使用CodeKit来合并我的CSS和JS文件。我认为非常有用的功能是能够在保存文件时进行合并；因为它监视相应的CSS / JS资源。一旦我将它们正确地组合，例如到1个CSS和1个JS文件，所有其他文件只需引用这两个文件即可。

你甚至可以要求CodeKit进行即时的缩小/压缩。

免责声明：我与CodeKit没有任何关联。我在网上随机找到它，它在我的开发过程中表现出色。自从我第一次使用它以来，它也有很好的更新。

- moey

---

这只针对于Mac...那Windows怎么办？ - Gaurav Aggarwal

我使用CodeKit并且非常喜欢它...除了使用git将项目检出到新分支会破坏我的js合并。我打算开始使用npm。 - gdbj

Answer 6

在2015年，使用Gulp是最简单的方法，我的看法是 - http://gulpjs.com/。 使用gulp-uglify压缩JavaScript代码和gulp-minify-css压缩CSS代码非常简单。 一定要尝试使用Gulp。

- igolkotek

Answer 7

对于那些想要更轻量级和灵活的东西的人，我今天创建了 js.sh 来解决这个问题。它是一个简单的命令行工具，针对 JS 文件，很容易修改以处理 CSS 文件。好处如下：

• 可轻松配置，供项目中多个开发人员使用
• 按 script_order.txt 中指定的顺序组合 JS 文件
• 使用 Google 的 Closure Compiler 进行压缩
• 将 JS 拆分成 <25kb 的块（如果可能），因为 iPhone 不会缓存大于 25kb 的任何内容
• 生成一个带有 <script> 标记的小 PHP 文件，您可以在适当的位置包含它们
• 用法：js.sh -u yourname

它可能需要一些改进，但对于我的使用情况而言，它比我迄今看到的所有其他解决方案都要好。

- Ben Y

Answer 8

我没有看到您提到内容管理系统（如WordPress，Joomla，Drupal等），但如果您使用任何流行的CMS，它们都有可用的插件/模块（也有免费选项）来压缩和缓存您的CSS和JS。

使用插件可以使您保留未压缩版本以进行编辑，然后当进行更改时，插件会自动包含您的更改并重新压缩文件。只需确保选择一个可以让您排除文件（例如自定义js文件）的插件，以防它破坏任何内容。

我过去曾尝试手动维护这些文件，但总是变成了维护噩梦。祝好运，希望对您有所帮助。

- RachelD

Answer 9

优化的第一步是文件最小化。(我强烈推荐使用GULP进行最小化和优化。它有简单的监视解决方案，安装后所有文件都会被压缩。支持所有的CSS、JS、less、sass等......)

或者老派的解决方案:

1) 通常作为一个优化过程，尝试将所有CSS合并到一个文件中，并使用Compass压缩文件。这样你对静态CSS的多次请求将被替换为单个请求。

2) 多个JS的问题可以通过使用CDN (或Google Hosted Libraries)来解决，这样请求将发送到其他服务器而不是你的服务器。这样服务器在发送下一个请求之前不必等待上一个请求完成。

3) 如果您有自己存储的JavaScript，请使用Brackets插件“压缩JavaScript”来最小化每个文件。这基本上只需要一个点击就能压缩JavaScript。Brackets是免费的编辑器，用于CSS和JS，但也可用于PHP和其他语言。有很多插件可供选择，适用于前端和后端开发人员。总的来说，“一键”即可执行所有这些（迄今为止多个）命令。顺便一提，Brackets代替了我非常昂贵的Dreamweaver ;)

3) 尝试使用Sass, Compass, less等工具来最小化您的CSS。

注意：即使不使用SASS混合或变量，您的CSS也将被压缩（只需使用纯CSS和Compass的“watch”命令即可为您压缩）。

我希望这可以帮到您！

- StefaDesign

Answer 10

如果您正在对提供的文件进行任何预处理操作，那么您可能需要设置一个适当的构建系统（例如Makefile）。这样，您就有了一些没有重复的源文件，每当您进行更改时，运行'make'命令即可将所有自动生成的文件更新到最新状态。如果已经存在构建系统，请学习其工作原理并使用它。如果没有，则需要添加一个。

首先，要从命令行中了解如何组合和压缩您的文件（YUICompressor文档涵盖了此内容）。指定一个目录用于自动生成的内容，与您正在处理的内容分开但可访问Web服务器，并输出到该目录，例如gen/scripts/combined.js。将您使用的命令放入Makefile中，并在每次进行更改并希望生效时重新运行'make'。然后更新其他文件中的标头以指向组合和压缩的文件。

- jimrandomh