1、 安裝
npm install webpack-bundle-analyzer --save-dev
 
2、 vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
configureWebpack: config => {
  if (process.env.NODE_ENV === 'production') {
   return {
    plugins: [
     new BundleAnalyzerPlugin()
    ]
   }
  }
 }
 
3、 package.json
 "analyz": "npm_config_report=true npm run build" // 打包命令,根據實際靈活修改
 
4、 npm run analyz  //預設8888 埠
5、 瀏覽器開啟localhost:8888

安裝外掛
  npm install webpack-bundle-analyzer --save-dev

在build/webpack.prod.config.js引入配置

if (config.build.bundleAnalyzerReport) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new 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'
    }),
]

執行
  npm run build // 正常的打包命令
瀏覽器開啟
    localhost:8889