Webpack

現代化網頁應用程式套裝組合

Addy Osmani

現代網頁應用程式通常會使用「組合工具」建立正式環境「套件」，以便執行最佳化、精簡的檔案 (指令碼、樣式表等)，並能縮短使用者下載的時間。在「利用 Webpack 進行網站效能最佳化」一文中，我們將逐步說明如何使用 Webpack 有效最佳化網站資源。這有助於使用者更快載入您的網站並進行互動。

Webpack 是現今最受歡迎的組合工具之一。利用其功能來最佳化現代化程式碼、將程式碼分割指令碼分割為重要和非關鍵的部分，以及移除未使用的程式碼 (例如名稱但僅有些最佳化作業)，可確保應用程式的網路用量及處理成本降到最低。

 

靈感來源：Susie Lu 的 Bundle Buddy 套件中的程式碼分割機制

注意： 我們開發了一款訓練應用程式，希望能夠最佳化本文所述的最佳化設定。您可以按照下列訣竅操作：webpack-training-project

首先，我們來看看如何針對新型應用程式 (JavaScript) 最佳化其中一項成本最高的資源。

• 降低前端大小
• 使用長期快取
• 監控及分析應用程式
• 結語