webpack+vue2打包分析视图插件 webpack-bundle-analyzer

1. 下载依赖

npm i webpack-bundle-analyzer

2. 引入

在 vue.config.js 中

// 记住 千万别忘了 BundleAnalyzerPlugin 这个引用
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

  configureWebpack: {
    plugins: [
     // 在 plugins 下使用
      new BundleAnalyzerPlugin({
        analyzerMode: 'server', // 启动HTTP服务器
        defaultSizes: 'parsed', // 显示解析后大小
        openAnalyzer: true // 自动打开浏览器
      }),
      // ......
      

3. 使用

打包后自动弹出本地生成的视图页面（如：npm run build）