前端

webpack-bundle-analyzer分析打包文件

  1. 安装：

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

  1. 在vue.config.js中配置：
1
2
3
4
5
6
7
8
9
10
11
12
13
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    chainWebpack: config => {
        // 打包分析
        if (process.env.IS_ANALYZ) {
          config.plugin('webpack-report')
            .use(BundleAnalyzerPlugin, [{
              analyzerMode: 'static',
            }]);
        }
    }
}

配置的时候可以根据实际需要修改分析报告，参考：https://github.com/webpack-contrib/webpack-bundle-analyzer，比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
config.plugin('webpack-report')
        .use(BundleAnalyzerPlugin, [{
          analyzerMode: 'server',
          analyzerHost: '127.0.0.1',
          analyzerPort: 8889,
          reportFilename: 'report.html',
          defaultSizes: 'parsed',
          openAnalyzer: true,
          generateStatsFile: false,
          statsFilename: 'stats.json',
          statsOptions: null,
          logLevel: 'info'
        }])
  1. 生成打包模块大小相关的报告：

report

推荐文章