步骤一、在项目根目录的config/config.ts文件中配置:jsMinifier压缩工具&jsMinifierOptions压缩选项字段。
umi4官网配置文档:https://umijs.org/docs/api/config#jsminifier-webpack
const { REACT_APP_ENV = 'dev' } = process.env;
export default defineConfig({
jsMinifier: 'esbuild', // 配置项目构建(打包,如运行npm run build)时:压缩 JavaScript 的工具;none表示不压缩。
jsMinifierOptions: { // 配置构建(打包)时压缩的相关选项
minifyWhitespace: true,
minifyIdentifiers: true,
minifySyntax: true,
drop: REACT_APP_ENV === 'production' ? ['console', 'debugger'] : [] // 可根据构建环境(如:npm run build:product),判断是否去除console、debugger语句
},
}}
步骤二、在package.json中添加对应环境变量的取值,运行构建如 npm run build:product命令即可自动去除console等。
cross-env REACT_APP_ENV=production
"build:product": "cross-env REACT_APP_ENV=production env-cmd -e product max build",
【扩展】:步骤二也可以替换为,在项目根目录下新建.env-cmdrc 文件:
.env-cmdrc:多环境配置文件,在package.json中可通过命令 env-cmd -e 环境名来指定环境,从而 process.env.xxx 获取当前环境配置下的变量值。
注意:一定要在product环境中添加 REACT_APP_ENV环境变量的值为 production;如果不添加,则config/config.ts中 process.env.REACT_APP_ENV 的值会一直是dev,即使运行npm run build:product 命令后,该变量的值仍是dev(前提是:没有在package.json中相关构建命令中手动添加环境变量) !
{
"test": {
"APP_BASE": "/xxx",
},
"mock": {
"APP_BASE": "/xxx"
},
"product": {
"REACT_APP_ENV": "production",
"APP_BASE": "/xxx"
}
}