使用一些生成的密鑰將js / css文件最小化為資產的方法

Question

我從事Web應用程序的開發已經有好幾年了，探索並尋找改善Web應用程序性能的方法。 我想問一下，當我們自動啟動Web應用程序時，是否有任何方法可以最小化CSS / JS？ 我不使用任何PHP框架，而是建立了自己的PHP框架。

我正在探索一個Web應用程序，我看到他們有這個

<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

通常，此功能內置於您使用的Web框架中，或者由一系列外部程序（如SASS，Compass，Uglify和Grunt）來完成工作。 有很多方法可以做到這一點，但是我將解釋其原理，只是其中的一種方法。

通常，原則是在部署過程中，將所有文件連接在一起，對內容進行哈希處理（例如MD5總和），然后基於該哈希創建文件名。

因此，例如，如果您有：

• 源/資產/reset.css
• 源/資產/main.css
• 來源/資產/fonts.css

您可以清除輸出資產目錄，該目錄與源資產目錄是分開的，因此您不會覆蓋任何內容，然后將這三個文件連接在一起，進行MD5哈希處理，然后創建一個名為application- $ hashvalue.css的文件，並將內容寫入其中。

串聯是有用的，但是您也可以通過一個縮小器（例如CSSMin，JSMin，Google的Closure Compiler等）運行它。

現在，這就是您想手動完成的全部操作。 當然，您不是解決此問題的第一人，並且有多種工具可以幫助您解決此問題。

為您執行此操作的一組通用示例工具：

咕unt聲 ，作為任務執行者。 有點像其他一切的主管。 Uglify ，一個用於JS SASS + Compass的管理程序，用於管理和最小化CSS grunt-contrib-uglify ：一個將Grunt連接到Uglify的插件grunt-contrib-compass ：一個將Grunt連接到Compass的插件

因此，您只需運行grunt文件，它將為您編譯所有內容。 您可以在部署期間執行此操作，也可以在本地運行目錄觀察器。

特定於PHP的資產管理：

https://github.com/kriswallsmith/assetic

不幸的是，這是我所知道的唯一一個，因為我不再使用PHP。