vue-cli项目中，使用webpack-bundle-analyzer进行模块分析，查看各个模块的体积，方便后期代码优化

 

一、安装

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

二、在vue.config.js中配置 

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

plugins: [
      new 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'
        }
      )
    ]

 

需要注意点是 配置信息要放在 configureWebpack 下 

 三、package.json 的 scripts中配置，然后npm run build启动就能看到效果

"analyz": "NODE_ENV=production npm_config_report=true npm run build"