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

IT技术 javascript css optimization yui-compressor http-compression
2021-01-27 12:35:47

我试图通过合并和压缩 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 文件也有同样的问题。

6个回答

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

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

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

嗨面条，它对我不起作用。它为该脚本 src 提供了 404。我使用了 - <script src=" test.com/script1.js,http://test.com/script2.js" > </... > 和所有 js 文件都给出了加载错误
2021-04-03 12:35:47

我认为YUI Compressor是最好的。它缩小了 JS 和 CSS，甚至剥离了console.log人们用于低级 JavaScript 调试的那些语句。

看看它有多容易。

如果您使用 svn/git，您可以在 ant 任务中启动它，因此将其包含在您的 post/pre-commit 钩子中。

更新：现在我将 grunt 与 concat、minify 和 uglify 贡献一起使用。您可以将它与观察者一起使用，以便在您更改源时在后台创建新的缩小文件。uglify contrib 不仅会去除控制台日志，还会去除未使用的功能和属性。

有关简要信息，请参阅本教程。

更新： 现在人们从 grunt 和它的前身“gulp”退后一步，使用 npm 作为构建工具。在这里阅读它。

更新： 所以现在人们使用纱线来运行 npm。难怪; 纱线图标是一只猫。大多数当前框架使用webpack将资源捆绑到包中，然后包也负责缩小。

工作流解决方案的伟大历史，期待下次更新！
2021-03-26 12:35:47
在 YUI Compressor 网站上，它写道：“YUI Compressor 还能够通过使用 Isaac Schlueter 基于正则表达式的 CSS 压缩器的端口来压缩 CSS 文件。” 另外：yui.github.io/yuicompressor/css.html
2021-03-30 12:35:47
来自上面的链接目前它不支持最小化 CSS 文件，即使这是 YUI Compressor 的一个功能。
2021-04-02 12:35:47
任何更新 ？现在的人在做什么？
2021-04-05 12:35:47
@Xsmael：我添加了一个更新的更新
2021-04-05 12:35:47

我需要更新需要这 3 个文件的所有页面以引用新缩小的 CSS。

首先我会说你应该有共同的标题。因此，在必要时无需随时更改所有标题。使用单头或 2-3 是一个好习惯。因此，根据您的页面需要，您可以更改标题。因此，无论何时您想扩展您的网络应用程序，都会减少风险和乏味。

您还没有提到您的开发环境。您可以看到针对不同环境列出了许多压缩工具。而且您使用的是好工具ieYUI Compressor。

Windows 用户的快速提示，如果您只想连接文件：

在所需位置打开 cmd，然后使用“ type ”将文件通过管道传输到文件

前任：

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

如果脚本的顺序很重要，则必须按所需顺序显式键入文件。

我在我的 angular/bootstrap 项目的 bat 文件中使用它

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
我发现的最简单的方法/概念应该可以完美运行，即使我使用的是完全不同的语言。我现在的想法是把它变成一个缓存文件，并让页面调用它。谢谢。
2021-04-10 12:35:47

我最终使用CodeKit来连接我的 CSS 和 JS 文件。我发现真正有用的功能是能够在文件保存时进行连接；因为它监控各自的 CSS / JS 资产。一旦我将它们正确组合在一起，例如 1 个 CSS 和 1 个 JS 文件，所有其他文件都可以参考这 2 个文件。

您甚至可以要求 CodeKit 进行动态缩小/压缩。

免责声明：我与 CodeKit 没有任何关联。我在网上随机找到了它，它在我的开发过程中起到了很好的作用。自从我一年多前第一次使用它以来，它还带来了很好的更新。

这仅适用于 mac ...... wht abt windows？？
2021-03-14 12:35:47
我使用 CodeKit 并喜欢它……除了使用 git 将项目签出到新分支会杀死我的 js 连接。打算开始使用 npm。
2021-04-04 12:35:47
其它你可能感兴趣的问题
上一篇禁用拖放 HTML 元素？ 下一篇如何跨域使用 window.postMessage？