1. 檔案不隨編譯變化
檔案hash不使用[hash]，而使用[chunkhash]，使得檔案只隨著內容變化，不隨著編譯變化，[hash]是每次編譯都變化一次
2. css檔案不受js模組變化影響
css檔案hash使用contenthash，這樣不受js模組變化影響
3. 提取vendor
公共庫不受業務模組變化影響
4. 內聯webpack runtime到頁面
chunkid變化不影響vendor，不占用http請求，使用chunk-manifest-webpack-plugin提取，gulp-inject插入到頁面
5. 保證module id穩定
模組的新增或刪除，會導致其後面的所有模組id重新排序，為避免這個問題，不使用數字作為模組id，改用檔案內容的hash值，使用hashedmoduleidsplugin可以解決
6. 保證chunkhash穩定
使用webpack-chunk-hash，替代webpack自己的hash演算法。webpack自己的hash演算法，對於同乙個檔案，在不同開發環境下，會計算出不用的hash值，不能滿足跨平台需求。
webpack打包快取 webpack打包效能分析
webpack提供的uglifyjs外掛程式由於採用單執行緒壓縮，速度很慢 webpack parallel uglify plugin外掛程式可以並行執行uglifyjs外掛程式，這可以有效減少構建時間，當然，該外掛程式應用於生產環境而非開發環境，配置如下 var paralleluglifypl...
webpack打包快取 webpack打包優化探索
雖然webpack的已經公升級到了webpack4，而我們目前還在使用 webpack3，但其中的優化點都大同小異，公升級後同樣適用。效能優化初步原則 這三條原則永遠是一切優化的前提 優化配置 公升級webpack 3，優化js的編譯能力 scope hoisting 1performance 減小...
webpack 效能優化
1.2 js 與 css 並行載入 1.3 開啟多執行緒 1.4 使用 dns 載入靜態資料 2.空間維度 webpack 效能優化無非是從時間和空間兩個維度去分析。時間指的是打包時間盡可能快 空間指的是打包體積盡可能小。本文的 webpack 效能優化是基於 webpack 4.3.0 版本。本文...