vue 项目添加体积分析插件

91 阅读1分钟

添加环境配置文件 .env.analyze

# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = '/prod-api'
ANALYZE_MODE = "analyze"

添加启动命令

 "build:analyze": "vue-cli-service build --mode analyze",

安装插件

cnpm  i  webpack-bundle-analyzer  --save

在vue.config.js 添加配置文件

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const isAnalyzeMode = !!process.env.ANALYZE_MODE
  configureWebpack: (config) => {
    if (isAnalyzeMode) {
      config.plugins.push(
        new BundleAnalyzerPlugin({
          analyzerMode: 'static'
        })
      )
    }
  }

生成分析文件

plugin.gif