Vue性能优化分析工具：webpack-bundle-analyzer打包文件分析

在正文的第一句加入： 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

1.安装webpack-bundle-analyzer插件：

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

2.然后在config.js中配置

module.exports = {
    chainWebpack: config => {
        config
            .plugin('webpack-bundle-analyzer')
            .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    }

}

再生产环境使用，可以做个判断：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin //项目大小分析图
const isPro = process.env.NODE_ENV === 'production'


module.exports = {
  ...
  configureWebpack: config => {
    if (isPro) {
      return {
        plugins: [
          // 使用包分析工具
          new BundleAnalyzerPlugin()
        ]
      }
    }
  },
  ...


}

运行命令：

npm run build --report

打包完成：

localhost:8888是固定端口，本地不要占用即可正常访问 打包完成之后就自动弹出窗口了

效果：