性能優化 - 查看 webpack 打包后所有的依賴關系（webpack 可視化工具）

查看 webpack 打包后所有組件與組件間的依賴關系，針對多余的包文件過大，

剔除首次影響加載的效率問題進行剔除修改，本次采用的是 ==webpack-bundle-analyzer（可視化視圖查看器）==

== 介紹1：webpack-bundle-analyzer（可視化）==

將捆綁內容表示為方便的交互式可縮放樹形圖

如下效果圖：

模塊功能：

• 意識到你的文件打包壓縮后中真正的內容
• 找出哪些模塊組成最大的大小
• 找到錯誤的模塊
• 優化它！
• 最好的事情是它支持縮小捆綁！它解析它們以獲得實際大小的捆綁模塊。它也顯示他們的gzipped大小！

安裝和使用

npm install --save-dev webpack-bundle-analyzer

在webpack.prod.conf.js中：

let BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    plugins: [new BundleAnalyzerPlugin()]
}

==BundleAnalyzerPlugin== 構造函數可以采用默認的可選配置對象：在plugins下添加以下代碼

new BundleAnalyzerPlugin({
// 可以是`server`，`static`或`disabled`。
// 在`server`模式下，分析器將啟動HTTP服務器來顯示軟件包報告。
// 在“靜態”模式下，會生成帶有報告的單個HTML文件。
// 在`disabled`模式下，你可以使用這個插件來將`generateStatsFile`設置為`true`來生成Webpack Stats JSON文件。
analyzerMode: 'server',
// 將在“服務器”模式下使用的主機啟動HTTP服務器。
analyzerHost: '127.0.0.1',
// 將在“服務器”模式下使用的端口啟動HTTP服務器。
analyzerPort: 8888,
// 路徑捆綁，將在`static`模式下生成的報告文件。
// 相對於捆綁輸出目錄。
reportFilename: 'report.html',
// 模塊大小默認顯示在報告中。
// 應該是`stat`，`parsed`或者`gzip`中的一個。
// 有關更多信息，請參見“定義”一節。
defaultSizes: 'parsed',
// 在默認瀏覽器中自動打開報告
openAnalyzer: true,
// 如果為true，則Webpack Stats JSON文件將在bundle輸出目錄中生成
generateStatsFile: false,
// 如果`generateStatsFile`為`true`，將會生成Webpack Stats JSON文件的名字。
// 相對於捆綁輸出目錄。
statsFilename: 'stats.json',
// stats.toJson（）方法的選項。
// 例如，您可以使用`source：false`選項排除統計文件中模塊的來源。
// 在這里查看更多選項：https： //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
statsOptions: null,
logLevel: 'info'
}),

啟動服務：

npm run build，等待一會，瀏覽器會自動打開一個頁面展示項目組件之間的依賴關系。