單個JS文件XMLHttpRequest vs組合gzip下載

Question

在我可以陳述情況之前的一些統計數據，

total JS code = 122 MB
minified = 36 MB
minified and gzip = 4 MB

我想一次將整個4 MB壓縮下來（在頁面上帶有加載進度指示器），解壓縮它們，但尚未解析它們。 當此時可能不需要很多代碼時，我們不希望代碼在瀏覽器的內存中擴展。 當遇到具有相應js文件名的腳本標簽時，應進行解析。

目的：更快地一鍵下載js文件，但從瀏覽器角度看，其行為保持不變。

是否存在這樣的解決方案？ 我什至在想理智嗎？ 如果是，我知道如何獲取gzip，我想知道如何將其保存在瀏覽器緩存中，以便在遇到腳本標簽時，瀏覽器不會再次為其觸發XMLHttpRequest。

Answer 1

訣竅是利用HTTP緩存指令。 首先，看看這個 。 您只需要獲取一次JS代碼，因為您可以安全地設置cache指令來指示瀏覽器無限期地保留JS文件（取決於空間）。 在這種情況下，無限期通常表示2035年。

當您准備使用新版本的JS文件更新所有瀏覽器端的緩存時，只需使用緩存無效查詢字符串即可。 可以使用任何序列號或時間和日期，也可以使用簡單的版本號，例如；

<script src="/js/myfile.js?v2.1"></script>

一些縮小框架為您處理緩存清除。 例如，一種好的技術是將內容MD5用作MD5內容並將其用作緩存無效化查詢字符串。 這樣，無論您的源JS何時更改，瀏覽器都會請求新版本（因為QS嵌入在HTML腳本標記中），然后再次緩存盡可能長的時間。

XMLHttpRequest將尊重您設置的緩存素數。

在問題的另一部分，我相信您要問的是是否可以下載一個組合的腳本文件，然后僅在頁面上使用單個腳本標簽引用它的一部分。 不-我不相信你可以做到。 如果要引用單個文件，則需要為要單獨使用的每條GZIPped內容提供一個HTTP URL和緩存指令。 但是，您可能會發現它起初的性能與一個大文件相比甚至更高，甚至更多，這取決於您可以實現多少並行化。

一個巧妙的技巧是預加載很多您需要的東西。 Google多年來一直在主頁上進行此操作。 基本上，它們預加載資源堆棧（當然是圖像，但也可能是JS）。 因此，當您考慮輸入什么搜索查詢時，他們已經在緩存中加載了您在下一頁上想要的內容。

因此，您可以在需要它們之前使用XMLHttpRequest來獲取您的JS文件（無需解析它們）。 然后，當您的<script/>標記引用它們時，它們便已被下載，您只需解析它們即可。

Answer 2

除了cirrus關於使用HTTP緩存的觀點之外，您還可以分解仍然很大的4mb文件，並僅在需要此功能時才加載它們。

這是更多的HTTP請求，但是4MB一口氣就大受歡迎。

建議像require.js這樣的東西在需要時加載適當的文件： http ://requirejs.org/docs/start.html