如何組織css和js文件的縮小和打包以加快網站速度？

Question

我正在為我的網站應用程序進行速度優化。 我找到了一些做法。 例如，從雅虎加速您的網站的最佳實踐 。 其中包括：

• 縮小JavaScript和CSS。
• 通過將多個文件（css，js）合並為一個來最小化HTTP請求的數量。

我的問題是你使用或建議執行的基礎設施，工具和構建過程是什么？

Answer 1

根據JavaScript Compression Rater ，最有效的工具是YUI Compressor或JSMin 。

Answer 2

您可以使用YUI Compressor 。

它可以壓縮JavaScript和CSS。 只需為所有文件運行它，然后將它們連接成一個“包”文件。 您可以手動執行此操作，編寫Makefile或使用某些腳本在Web請求上壓縮“即時”，但您可能希望緩存生成的文件。

Answer 3

雅虎提示非常好。 我使用gomez來測試優化工作的結果。 縮小是一個很好的步驟。 我發現通常可以通過調整頁面的組合方式來實現更大的影響（特別是在減少將多少圖像切割成小塊以減少請求數量時）。 無論如何，這個雅虎博客提供了一個非常好的縮小工具的概述。 我通常遠離混淆，除非在相對較小的性能提升之外有令人信服的理由。 安裝和使用縮小工具的實際步驟相對簡單。

Answer 4

我為此編寫了自己的自定義管理器。 它使用google的閉包編譯器，僅在發布模式下需要時壓縮文件。 看看這個：

http://www.picnet.com.au/blogs/Guido/post/2009/12/10/Javascript-runtime-compilation-using-AspNet-and-Googles-Closure-Compiler.aspx

謝謝

Guido Tapia

Answer 5

或者您可以將HTTP服務器配置為GZIP壓縮所有文本文檔。

Answer 6

我做ASP.NET，所以我使用CruiseControl.NET和NAnt進行構建過程。 這個構建過程的一部分是使用YUICompressor壓縮，根據我的經驗，這是最好的壓縮器。

如果你不做ASP.NET，那么仍然可以使用相同容量的原始CruiseControl和Ant。

我發現這是一個優秀的設置的原因是因為a）所有繁瑣的東西都是自動化的b）如果你在自己的機器上測試你不必調試一個超長的JS串:)

Answer 7

我已將縮小功能集成到我的部署過程中。 我使用包JavaScript :: Minifier和CSS :: Minifier在perl中完成。

在開發過程中，我想保持腳本擴展。 我在我的HTML中添加了一些注釋，以便我的腳本知道要放入哪些文件並縮小：

<!--- MinifyJS[js/minified-1.js] -->
<script src="..."></script>
<script src="..."></script>
<!-- end[js/minified-1.js] -->

<!--- MinifyCSS[css/minified-1.css] -->
<link ...>

幾個正則表達式，我很快得到一個帶有縮小文件的“生產”版本。

Answer 8

迪恩愛德華茲/包裝工/我自己的忠實粉絲 - 有各種口味。

Answer 9

通過關注雅虎博客鏈接，我發現了一個真正的解決方案 - “ 通過組合和壓縮javascript和css文件使你的頁面加載速度更快 ”由Niels Leenheer提供。

Answer 10

為了在將所有內容上傳到Web之前壓縮所有內容，這個程序對CSS / JS / HTML來說都很棒：

http://www.w3compiler.com/

甚至可以選擇不壓縮的區域，因為並非所有標記中的MVC代碼都支持壓縮。

並且每次壓縮文件時都會保存備份文件，因此只需單擊一下即可輕松解壓縮。

Answer 11

我發現Minify對我的PHP項目最有用。 非常易於使用，只需節省時間，手動配置CSS和JS文件的最小化，壓縮和緩存。 還有一個整潔的分組功能。

關於YUI Compressor的一些注意事項

1. YUI Compressor根本不生成換行符，而Minify有一些換行符。
2. 如果您有轉義字符串，請小心。 我發現YUI Compressor不會讓他們失望。 所以像“\\”這樣的字符串變成“'”。