現代化網頁應用程式套裝組合
現代網頁應用程式通常會使用「組合工具」建立正式環境「套件」,以便執行最佳化、精簡的檔案 (指令碼、樣式表等),並能縮短使用者下載的時間。在「利用 Webpack 進行網站效能最佳化」一文中,我們將逐步說明如何使用 Webpack 有效最佳化網站資源。這有助於使用者更快載入您的網站並進行互動。
![Webpack 標誌。](https://web.developers.google.cn/static/articles/webpack/image/webpack-logo.png?authuser=19&hl=zh-tw)
Webpack 是現今最受歡迎的組合工具之一。利用其功能來最佳化現代化程式碼、將程式碼分割指令碼分割為重要和非關鍵的部分,以及移除未使用的程式碼 (例如名稱但僅有些最佳化作業),可確保應用程式的網路用量及處理成本降到最低。
![套用 JavaScript 最佳化功能的前後對照。「互動時間」功能改善](https://web.developers.google.cn/static/articles/webpack/image/before-after-applying-ja-4050ad9acad04.png?authuser=19&hl=zh-tw)
靈感來源:Susie Lu 的 Bundle Buddy 套件中的程式碼分割機制
首先,我們來看看如何針對新型應用程式 (JavaScript) 最佳化其中一項成本最高的資源。