如何在Webpack 5中基于环境变量实现条件代码剔除？

针对你在Webpack 5（基于@vue/cli-service@5.0.8）下遇到的环境分支未被正确剔除的问题，推荐以下两种可靠方案：

方案一：利用Vue CLI内置的环境变量机制 #

Vue CLI对环境变量有默认处理规则，带VUE_APP_前缀的变量会被自动注入客户端代码，且Webpack能直接识别这类变量做静态分析和tree-shaking。

1. 设置环境变量

   • 客户端构建时，可通过命令行或.env文件配置：
     • 命令行方式：VUE_APP_CLIENT_BUILD=true npm run build
     • 或创建.env.production文件，写入：VUE_APP_CLIENT_BUILD=true

2. 修改util.js的条件判断
   替换为Vue CLI可识别的变量，确保Webpack能静态判断分支：

   async function foo() {
     if (process.env.VUE_APP_CLIENT_BUILD === 'true') {
       // 客户端逻辑，打包时会保留
       console.log('Client-side logic');
     } else {
       // 服务端逻辑，客户端打包时会被完全剔除
       console.log('Server-side logic');
     }
   }
   export default { foo };
   

方案二：手动配置Webpack的DefinePlugin #

如果要保留自定义变量名（比如CLIENT_BUILD），可通过vue.config.js直接配置Webpack的DefinePlugin，强制把变量替换为静态值，让Webpack精准识别无用分支：

1. 创建/修改vue.config.js

   const webpack = require('webpack');
   
   module.exports = {
     configureWebpack: {
       plugins: [
         new webpack.DefinePlugin({
           'process.env.CLIENT_BUILD': JSON.stringify(process.env.CLIENT_BUILD || 'false')
         })
       ]
     }
   };
   

2. 客户端构建时传入变量
   执行构建命令：CLIENT_BUILD=true npm run build

3. 保持util.js原有条件
   此时原有的if (process.env.CLIENT_BUILD === 'true')会被Webpack替换为if ('true' === 'true')，服务端分支会被自动剔除。

关键注意事项 #

• 确保tree-shaking生效：客户端构建必须用production模式（Vue CLI的npm run build默认就是production），development模式下Webpack不会开启tree-shaking优化。
• 避免动态表达式：条件判断必须是Webpack能静态分析的简单表达式，不能用函数调用、动态拼接等复杂逻辑，否则无法触发分支剔除。

内容的提问来源于stack exchange，提问作者bguiz