雖然webpack的已經公升級到了webpack4，而我們目前還在使用 webpack3，但其中的優化點都大同小異，公升級後同樣適用。
效能優化初步原則
這三條原則永遠是一切優化的前提
優化配置
公升級webpack 3，優化js的編譯能力(scope hoisting)
1performance:
減小**量
提取 chunk 中使用的公共庫(能為chunk**節約近1/3的**量)
1 8 }生產模式(pro)下第三方庫使用已壓縮版本，能節約近20k檔案大小
1// 開發模式 2resolve: 6} 7// 生產模式 8resolve: 12}優化 babel-ployfill，結合 babel-preset-env 實現相容按需載入，比使用es2015能節約近半的大小
減少請求數
最大化利用瀏覽器快取
這樣能最大化利用瀏覽器快取
1// 不固定版本，會造成打包後 hash 值變化，瀏覽器沒辦法利用本身的快取載入js，每次上線都會使本地快取失效，頁面載入變慢 2"dependencies":
其他優化
zindex被重置問題
由於cssnano預設配置，是自動會把 z-index重置為1，例如：
1classname 45after67classname
這時候需要優化cssnano的配置，.postcssrc 如下：
1/* eslint-disable no-unused-vars */ 2module.exports = 10 ]11 }12 }13}
使用按需載入js後，打包**特別大
需要注意的是，當使用按需載入的功能，然後沒有提取所有chunk包裡的 css，同時又開啟了sourcemap功能，那麼就會造成這種情況 最簡單的辦法就是，對css不使用 sourcemap功能，例如：
1rules: [2 7 }8]
廣告以下是筆者基於 vue-cli 的模版優化後的vue和 react的打包工具，用法一致。
以下包整合了以上所有優化，支援單頁面及多頁面應用，完全相容vue-cli生成的模版專案
zz-webpack-vue
zz-webpack-react
以下是使用本組乙個vue-cli生成的專案做的乙個優化對比：
優化前：
打包
分析優化後：
打包
分析可以檢視具體的優化配置，或者直接在專案中嘗試使用，有任何問題歡迎隨時反饋，目前正在籌畫統一公升級webpack4
webpack打包快取 webpack打包效能分析
webpack提供的uglifyjs外掛程式由於採用單執行緒壓縮，速度很慢 webpack parallel uglify plugin外掛程式可以並行執行uglifyjs外掛程式，這可以有效減少構建時間，當然，該外掛程式應用於生產環境而非開發環境，配置如下 var paralleluglifypl...
webpack打包檔案
webpack.config.js是自己建立的打包檔案 在檔案的跟目錄下 引用html webpack plugin 首先要 npm install html webpack plugin s 在命令列中執行一下 let path require path 引入這個檔案就不會把相對路徑變成絕對路徑 ...
webpack打包優化
tree shaking 使用import匯入的包，在生產環境下自動去除包內沒有引用的 這是webpack打包自帶的優化 import是es6引入規範 所以記得要裝babel require是common.js引入規範 scope hosting 在bundle.js檔案 module a.js e...