vue和react（基于umi3）针对webpack-bundle-analyzer的配置

下载依赖

npm install cross-env -S
yarn add cross-env

npm install webpack-bundle-analyzer -D
yarn add webpack-bundle-analyzer -D

vue 再根目录下的vue.config.js下配置，并配置环境变量和打包指令

// package.json
// 在根目录设置 .env.test .env.pro 分别代表测试/生产环境的环境变量配置
{
 "scripts":{
    "analyzer:dev": "cross-env VUE_APP_ANALYZE=true vue-cli-service build --mode dev",
    "analyzer:test": "cross-env VUE_APP_ANALYZE=true vue-cli-service build --mode test",
    "analyzer:pro": "cross-env VUE_APP_ANALYZE=true vue-cli-service build --mode pro"
  }
}

// vue.config.js
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const { resolve } = require('path');
module.exports = {
    chainWebpack: (config) => {
        // 设置项目全局组件映射
        config.resolve.alias.set('base-component', resolve(__dirname, './src/components'));
       // 再有环境变量process.env.VUE_APP_ANALYZE的时候运行bundle插件
       (process.env.VUE_APP_ANALYZE) && (config.plugin('webpack-bundle-analyzer').use(BundleAnalyzerPlugin));
    }
}

react(umi)配置，并配置环境变量和打包指令

因为umi框架已经封装好了webpack-bundle-analyzer插件,只需要再cmd指令里配置就行

// package.json
// 这里可再根目录配置 config/config.ts  config/config.test/ts  config/config.pro.ts 分别代表前端的开发/测试/生产环境的配置
{
 "scripts":{
    "analyzer:dev": "cross-env ANALYZE=1 UMI_ENV=dev umi build",
    "analyzer:test": "cross-env ANALYZE=1 UMI_ENV=test umi build",
    "analyzer:pro": "cross-env ANALYZE=1 UMI_ENV=pro umi build"
  }
}

浏览器打开127.0.0.1:8888地址可以看到一下效果图：