應用場景：專案使用webpack2.x進行打包，打包後靜態資源通過nginx**配置：
問題：webpack打包後的資源檔案特別，特別大，沒打包之前頁面乙個頁面js有2m左右(其中已經抽離了css)？
優化一：一看js這麼大肯定是沒有關閉source-map，先將webpack配置檔案中dev-tool：false,
優化二：使用compresion-webpack-plugin外掛程式將靜態資源壓縮,並生成.gz檔案，配置如下：
具體用法請參照：
優化三：如何使用壓縮後的gzip檔案呢？
將nginx配置開啟gzip壓縮，nginx會根據配置情況對指定的型別檔案,進行壓縮。主要針對js與css.如果檔案路徑中存在與原檔案同名（加了個.gz），nginx會獲取gz檔案，如果找不到，會主動進行gzip壓縮。
nginx配置如下：
至此：檔案已經從2m變成了100+k，還是太大了，繼續優化中。。。。
webpack打包優化
tree shaking 使用import匯入的包，在生產環境下自動去除包內沒有引用的 這是webpack打包自帶的優化 import是es6引入規範 所以記得要裝babel require是common.js引入規範 scope hosting 在bundle.js檔案 module a.js e...
webpack 打包速度優化
const path require path const webpack require webpakc module.exports output plugins new webpack.dllplugin 混淆壓縮 new webpack.optimize.uglifyjsplugin 第三步...
webpack打包體積優化
這個外掛程式可以直觀展示打包之後，每個包的大小，分析出是否重複打包了某個模組。專案中我們通過cdn引入了某個庫，但是又不想這個庫被打包到webpack最終模組中，我們可以使用externals externals webpack4中production模式下會自動開啟tree shaking模式，但...