0

I am have been building web applications for several years, exploring and looking for ways to improve the web app performance. I would like to ask if there is any method to minify css/js when we launch the web application automatically? I do not use any php frameworks, rather i built my own.

I was exploring one web application and i saw they have this

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

I seen similar sites that has js and css files stored in /assets/ etc with a name starting with application- too. I would like to know if anyone of you know what mechanism they are using? I am sure they compressed their files the same way.

Any idea what framework/programming langugage they are using?

advice appreciated. thanks

4

1 回答 1

1

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

通常，原则是在部署过程中，将所有文件连接在一起，获取内容的散列（如 MD5 总和），并基于该散列创建文件名。

例如，如果您有：

  • 源/资产/reset.css
  • 源/资产/main.css
  • 源/资产/fonts.css

您可以清除与源资产目录分开的输出资产目录，这样您就不会覆盖任何内容，然后将这 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 的资产管理：

https://github.com/kriswallsmith/assetic

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

于 2013-06-27T19:48:18.520 回答