vue打包分析webpack-bundle-analyzer

安装

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

webpack配置

// 使用@vue/cli初始化的项目
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
  publicPath: '/',
  configureWebpack: config => {
    config.plugins.push(new BundleAnalyzerPlugin())
  }
}

输出结果

bundle analyzer.png

1. 分析输出页面独立于前端项目访问。如图，webpack-bundle-analyzer访问地址为http://localhost:8888，而前端项目访问地址为http://localhost:8080
2. 在build模式下，在正常输出前端编译文件外，会另外启动结果分析页