可视化分析包大小 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