>[success] # webpack 項目分析 ~~~ 1.想優化給先做好項目分析，優化不是盲目去做要先發現問題，在針對性去優化 ~~~ >[info] ## 輸出構建信息 ~~~ 1.利用配置指令'--json':以json格式輸出構建結果，最后只輸出一個json文件（包含所有的構建信息） 具體配置在可以在'package.json'， { "scripts": { "build:stats": "webpack --json > stats.json" } } 運行完后會根目錄生成' stats.json'里面有構建的信息，如果想指定獲取可以使用 'StatsWebpackPlugin 和 WebpackStatsPlugin'兩個插件對構建信息指定內容獲取這可以直接參考對應的 文檔使用即可 2.官方也提供了可視化的方案幫助來分析'生成的json文件'具體可以參考鏈接 'https://webpack.js.org/guides/code-splitting/#bundle-analysis'其中'webpack-chart','webpack-visualizer' 和'webpack bundle optimize helper'都是需要將生成的'json文件上傳其提供的網站上幫你生成圖形化效果圖' ~~~ >[danger] ##### 配置一些輔助 ~~~ 1.color 輸出結果帶彩色，比如：會用紅色顯示耗時較長的步驟 2.profile 輸出性能數據，可以看到每一步的耗時 3.progress 輸出當前編譯的進度，以百分比的形式呈現 配置后效果'"webpack --display-modules --profile --progress --colors" ',，'--progress --profile ' 這兩個配置是屬于webpack 自身的在任何環境都可以加，可以幫你顯示打包進度條，和時序顯示 ~~~ >[danger] ##### 更多的工具參考 [更多分析工具參考](https://survivejs.com/webpack/optimizing/build-analysis/) >[info] ## 實踐 ~~~ 1.上面推薦了很多工具，這里實踐選擇了'speed-measure-webpack-plugin' 和'webpack-bundle-analyzer' 1.1.'準備基于時間的分析工具',來幫助我們統計項目構建過程中在編譯階段的耗時情況 'speed-measure-webpack-plugin' 1.2.'準備基于產物內容的分析工具',找到那些冗余的、可以被優化的依賴項。通常，減少這些冗余的依賴包模塊 不僅能減小最后的包體積大小，也能提升構建模塊時的效率'webpack-bundle-analyzer' ~~~ [speed-measure-webpack-plugin](https://www.npmjs.com/package/speed-measure-webpack-plugin) [webpack-bundle-analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer)