加載一個大的 javascript 文件與多個整體大小較小的小文件的性能？

Question

我有一個關於 javascript 文件加載的問題。 從我到目前為止所讀到的內容來看，普遍的共識似乎是“腳本文件越少越好”，但我找不到下一個問題的答案：

假設您有一個包含 4000 行代碼的 javascript 文件，但在一個特定頁面上只使用了其中的 500 行。 僅在打開特定頁面時加載腳本的這部分（使用 if URL == X then load {} 之類的內容）是否有意義（性能方面）？ 還是一次性加載整個腳本會更好？

（請假設有問題的腳本可以重構為多個文件）

Answer 1

實際上，在粒度級別（如您的問題中建議的約 500 行）分解功能加載的 javascript不會給您帶來更好的性能。 您將從組合、縮小和優化您的 javascript 中獲得更多好處。 不要忘記縮小您的 CSS。

這通常會加快下載時間，因為它不僅減少了傳輸的字節數（您關注的內容），而且實際上使您的 javascript 更小（使變量名稱更小並刪除空格），並且還減少了 HTTP 請求的數量（這實際上對頁面性能有很大影響）。 查看這篇文章，更深入地演示這如何影響速度。

此外，通過始終使用相同的組合/縮小文件（而不是為應用程序中的每個頁面使用不同的文件），您可以利用瀏覽器在第一次加載時緩存您的腳本，這意味着在初始加載后，您的頁面從緩存。

（注意 - 我鏈接到 Google PageSpeed 以獲得上面的優化提示 - 對於進行 js 優化，還有很多有用的知識）