javascript - 合并和缩小多个 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 文件也有同样的问题。

Answer 1

查看 minify - 它允许您将多个 js、css 文件组合成一个，只需将它们堆叠到一个 url 中，例如

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

我们已经使用它很多年了，它做得很好并且可以即时完成(无需编辑文件)。