如何阻止Webpack对特定函数执行Tree Shaking操作？

核心原因 #

生产模式下Webpack的Tree Shaking会移除未被模块系统内部引用的代码。你在HTML独立<script>里调用的someFunctionFromBundle不在Webpack的模块依赖链中，所以被判定为死代码被移除。

解决方案（按优先级排序） #

1. 将函数暴露到全局对象（最推荐） #

直接把函数挂载到window上，Webpack会识别到这个赋值操作是副作用代码，不会将其Tree Shaking掉，同时也能让HTML中的脚本访问到：

// app.js 中
import qs from 'query-string';

function someFunctionFromBundle() {
  // 你的自定义逻辑示例
  return qs.parse(window.location.search);
}

// 暴露到全局window对象
window.someFunctionFromBundle = someFunctionFromBundle;

2. 显式标记函数为"被使用" #

如果你的函数是通过ES模块导出的，确保在入口文件中明确引用并赋值到全局：

// 比如在utils.js中导出函数
export function someFunctionFromBundle() {
  // ...你的逻辑
}

// 在app.js入口文件中
import { someFunctionFromBundle } from './utils';
// 赋值到全局，触发副作用
window.someFunctionFromBundle = someFunctionFromBundle;

3. 调整Webpack配置（仅在必要时使用） #

如果上述方法无效，可以通过Webpack配置强制保留函数，但这会影响整体Tree Shaking效率，建议作为最后手段：

方法A：禁用特定函数的压缩移除

使用TerserPlugin（Webpack生产模式默认启用）配置，强制保留函数名：

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // ...其他配置
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          keep_fnames: /someFunctionFromBundle/, // 匹配要保留的函数名
        },
      }),
    ],
  },
};

方法B：关闭部分Tree Shaking逻辑

不推荐全局关闭，但如果只是临时调试可以用：

// webpack.config.js
module.exports = {
  optimization: {
    usedExports: false, // 关闭未使用导出的检测，会减少Tree Shaking的范围
  },
};

验证方法 #

打包后检查生成的bundle文件，确认someFunctionFromBundle存在，然后在HTML中测试调用是否正常。

内容的提问来源于stack exchange，提问作者Michał Graczyk