用webpack優化前端性能是指優化webpack的輸出結果，讓打包的最終結果在瀏覽器運行快速高效。
1.壓縮代碼。刪除多余的代碼、注釋、簡化代碼的寫法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUglifyPlugin來壓縮JS文件， 利用cssnano（css-loader?minimize）來壓縮css 2.利用CDN加速。在構建過程中，將引用的靜態資源路徑修改為CDN上對應的路徑。可以利用webpack對於output參數和各loader的publicPath參數來修改資源路徑 3.刪除死代碼（Tree Shaking）。將代碼中永遠不會走到的片段刪除掉。可以通過在啟動webpack時追加參數--optimize-minimize來實現 4.提取公共代碼。
如何提高webpack的構建速度？
1.多入口情況下，使用CommonsChunkPlugin來提取公共代碼 2.通過externals配置來提取常用庫 3.利用DllPlugin和DllReferencePlugin預編譯資源模塊 通過DllPlugin來對那些我們引用但是絕對不會修改的npm包來進行預編譯，再通過DllReferencePlugin將預編譯的模塊加載進來。 4.使用Happypack 實現多線程加速編譯 5.使用webpack-uglify-parallel來提升uglifyPlugin的壓縮速度。 原理上webpack-uglify-parallel采用了多核並行壓縮來提升壓縮速度 6.使用Tree-shaking和Scope Hoisting來剔除多余代碼
7.使用高版本的 Webpack 和 Node.js
8.圖片壓縮 配置image-webpack-loader
9.充分利用緩存提升二次構建速度