webpack-bundle-analyzer

  webpack-bundle-analyzer 是一个打包文件分析工具，主要作用是可以直观分析打包出的文件包含哪些，大小占比如何，压缩后的大小等等。

一、安装插件

  npm install webpack-bundle-analyzer --D

二、配置 vue.config.js 文件

  const { resolve } = require('path');

  module.exports = {
    ....其它的配置
    chainWebpack: (config) => {
      if (process.env.NODE_ENV === 'production') {
        config
          .plugin('webpack-bundle-analyzer')
          .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin);
      }
    },
  }

• 如果想在运行项目时就出现，则可以把 环境变量 的判断注释掉
• 打开的默认端口号是：8888

效果

•