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

效果

•