php - 使用一些生成的 key 将 js/css 文件缩小为 Assets 的方法

Question

多年来，我一直在构建网络应用程序，探索并寻找提高网络应用程序性能的方法。我想请问有没有什么方法可以在我们自动启动web应用程序时缩小css/js？我不使用任何 PHP 框架，而是构建了自己的框架。

我正在探索一个网络应用程序，我看到他们有这个

<link href="/assets/application-76c372b1409e29d226c9566022d5546f.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/application-cb571d9ff5185e712000e3378494e4ee.js" type="text/javascript"></script>

我看到类似的网站也将 js 和 css 文件存储在/assets/等中，名称也以 application- 开头。我想知道你们中是否有人知道他们使用的是什么机制？我确信他们以相同的方式压缩文件。

知道他们使用的是什么框架/编程语言吗？

感谢建议。谢谢

Answer 1

通常此功能内置于您正在使用的网络框架中，或者由一系列外部程序(如 SASS、Compass、Uglify 和 Grunt)来完成这项工作。 有很多方法可以做到这一点，但我将解释原理和一种方法。

一般来说，原则是在部署过程中，将所有文件连接在一起，对内容进行散列(如 MD5 和)，并根据该散列创建文件名。

例如，如果您有:

• 源/ Assets /reset.css
• 源/ Assets /main.css
• source/assets/fonts.css

您可以清除输出 Assets 目录，它与源 Assets 目录是分开的，这样您就不会覆盖任何东西，然后将这 3 个文件连接在一起，采用 MD5 哈希，然后创建一个名为 application-$hashvalue 的文件.css，并将内容写入其中。

连接很有用，但您也可以通过 CSSMin、JSMin、Google 的 Closure Compiler 等压缩器运行它。

现在，如果您想自己手动完成，就可以了。您当然不是第一个解决此问题的人，并且有多种工具可以为您解决此问题。

为您执行此操作的一组通用工具示例:

Grunt ，作为任务执行者。有点像其他一切的主管。 Uglify , 一个 JS 的压缩器 SASS + Compass管理和缩小你的 CSS grunt-contrib-uglify : 将 Grunt 连接到 Uglify 的插件 grunt-contrib-compass : 将 Grunt 连接到 Compass 的插件

然后您只需运行您的 grunt 文件，它就会为您编译所有内容。您可以在部署期间执行此操作，或者让目录观察器在本地运行。

特定于 PHP 的 Assets 管理:

https://github.com/kriswallsmith/assetic

不幸的是，这是我唯一知道的，因为我不再经常使用 PHP。