方法用一些生成的键将js/css文件缩小为资产


Methods to minify js/css files into assets with some generated key

我多年来一直在构建web应用程序,探索并寻找提高web应用程序性能的方法。我想问一下,当我们自动启动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/etc中,名称也以application开头。我想知道你们中是否有人知道他们在使用什么机制?我确信他们压缩文件的方式是一样的。

知道他们在使用什么框架/编程语言吗?

感谢您的建议。感谢

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

一般来说,原则是在部署过程中,将所有文件连接在一起,获取内容的哈希值(如MD5和),并基于该哈希值创建文件名。

例如,如果你有:

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

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

连接是有帮助的,但您也可以通过一个迷你程序运行它,如CSSMin、JSMin、Google的闭包编译器和许多其他程序。

现在,如果你想自己动手,就到此为止。你当然不是第一个解决这个问题的人,有很多工具可以帮你解决这个问题。

为您提供的一套通用工具示例:

Grunt,作为一名任务执行者。有点像其他事情的主管。Uglify,JS的缩小版SASS+指南针管理和缩小您的CSSgrunt contrib uglify:一个将grunt连接到uglify的插件grunt contrib compass:一个将grunt连接到compass 的插件

所以,你只需要运行你的grunt文件,它就会为你编译所有的东西。您可以在部署期间执行此操作,也可以在本地运行目录观察程序。

PHP特定资产管理:

https://github.com/kriswallsmith/assetic

不幸的是,这是我所知道的唯一一个,因为我不再经常使用PHP了。