可視化分析包大小 webpack-bundle-analyzer

可視化分析包大小 webpack-bundle-analyzer

• 分析內容：如圖所示，打包出的文件包含哪些，大小佔比如何，模塊包含關係，依賴項，文件是否重複，壓縮後大小如何
• 步驟如下：
  1. 安裝：npm install webpack-bundle-analyzer --save-dev
  2. 配置：

• webpack.config.js:

// 分析包內容 
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; 
module.exports = { 
plugins: [ 
// 開啓 BundleAnalyzerPlugin 
new BundleAnalyzerPlugin(), 
    ], 
};   

• feflow.js:(如果使用fellow框架)

// 掃描 bundle 並構建其內部內容的可視化 npm run analyz
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

builderOptions.webpackConfig.config.plugins.push(
// 開啓 BundleAnalyzerPlugin
new BundleAnalyzerPlugin(),

);

3. 在package.json中的script中補上：

"analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build”

4. 運行： nom run analyz

最後 Webpack Bundle Analyzer is started at