Webpack中条件导入模块仍被打包问题求助

我之前也踩过这个Webpack Tree Shaking的坑！你描述的情况——条件日志输出正常，但模块还是被打包进去，大概率是Webpack的静态代码分析没识别到你的条件分支，导致它没法安全地把未使用的模块剔除。咱们一步步来解决：

• 确保DefinePlugin的变量是字面量而非引用
  很多人在这里踩坑：DefinePlugin是直接替换代码中的变量，如果你没把值转成字面量，Webpack没法静态判断它的取值。比如正确的配置应该是：

  new webpack.DefinePlugin({
    // 必须用JSON.stringify转成字符串字面量，否则会被当成变量引用
    'process.env.FEATURE_FLAG': JSON.stringify('on')
  })
  

  要是直接写'on'，Webpack会把它当成一个名为on的变量，而不是字符串值，自然没法静态分析条件。

• 条件判断要写成静态可分析的形式
  Webpack只能在编译时确定的条件分支才会触发Tree Shaking，所以要避免用运行时变量做判断。比如：

  // ❌ 不好的写法：flag是运行时变量，Webpack没法确定结果
  const flag = process.env.FEATURE_FLAG;
  if (flag === 'on') {
    import('./heavy-module.js');
  }
  
  // ✅ 好的写法：直接用字面量判断，Webpack编译时就能知道分支是否执行
  if (process.env.FEATURE_FLAG === 'on') {
    import('./heavy-module.js').then(({ doSomething }) => {
      doSomething();
    });
  }
  

  这种直接的字面量对比，Webpack能明确知道当变量为'off'时，这个分支永远不会执行，从而跳过该模块的打包。

• 确认模块是ES模块（ESM）
  Tree Shaking对CommonJS模块的支持很差，因为CommonJS的require是动态的，Webpack没法确定哪些代码没用。所以你的目标模块必须用export导出，而不是module.exports：

  // heavy-module.js 正确的ESM写法
  export const doSomething = () => {
    // 模块逻辑
  };
  

• 开启Webpack的production模式
  只有在production模式下，Webpack才会自动启用Tree Shaking、代码压缩等优化。如果是development模式，即使条件不满足，模块也会被打包进去（只是不会执行）。配置里一定要加：

  module.exports = {
    mode: 'production', // 关键！
    // 其他配置...
  };
  

• 极端情况：用IgnorePlugin强制剔除模块
  如果以上方法都没用，你可以用IgnorePlugin强制让Webpack忽略目标模块：

  new webpack.IgnorePlugin({
    checkResource(resource) {
      // 当条件不满足时，忽略heavy-module.js
      if (process.env.FEATURE_FLAG !== 'on' && resource.includes('heavy-module.js')) {
        return true;
      }
      return false;
    }
  })
  

  不过这种方法比较暴力，优先推荐前面的静态分析方案。

按照这些步骤调整后，你应该能看到当条件为false时，目标模块不再出现在打包产物里，包体积也会相应缩小。

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