前端打包结果分析工具

1. 使用 webpack 打包（webpack5）

• 安装依赖包

npm i webpack-bundle-analyzer --D

• 新增配置
  在webpack.config.js中加入依赖

  plugins: [
   // ...其他工具 
    new BundleAnalyzerPlugin(),
  ]

• 运行打包命令

npm run build:prod

• 结果
  

2. 使用vue-cli打包(vue-cli5)

• 安装依赖包

npm i webpack-bundle-analyzer --D

• 新增配置
  在webpack.config.js中加入依赖

  configureWebpack: {
    plugins: [
       // ...其他工具
      new webpackBundleAnalyzer()
    ],
  },

• 运行打包命令

npm run build:prod

• 结果
  

3. vite打包

• 安装依赖包

npm i vite-bundle-visualizer --D

• 新增配置
  在package.json中加入命令

scripts: {
  // ... 其他命令
  "visualizer": "vite-bundle-visualizer"
}

• 运行打包命令

npm run visualizer

• 结果