如何让Webpack保留TypeScript中未被代码引用的函数？

数据老陈

2026-8-6

解决Webpack移除未引用全局函数的问题

Webpack会通过tree shaking和代码压缩移除未被模块内部引用的函数，但这些函数需要在HTML的onclick等事件中调用时，你可以通过以下几种方式保留它们：

方法1：将函数挂载到window全局对象（推荐）

Webpack默认会把代码包裹在模块作用域内，未被引用的函数不会暴露到全局。直接将函数赋值给window，让Webpack识别到该函数被使用：

// 在你的ts文件中
function handleButtonClick() {
  console.log("按钮被点击");
}

// 挂载到window，确保函数能在全局访问
(window as any).handleButtonClick = handleButtonClick;

这种方式精准控制需要保留的函数，不会影响其他代码的优化效果。

方法2：配置TerserPlugin禁止移除未使用代码

你的配置中已经使用了TerserPlugin，默认它会移除未使用的函数。修改其配置，禁用unused压缩选项，并保留函数名：

修改webpack.config.js中的optimization.minimizer部分：

optimization: {
  minimizer: [new TerserPlugin({
    extractComments: false,
    terserOptions: {
      compress: {
        unused: false, // 禁止移除未使用的函数/变量
      },
      keep_fnames: true, // 保留原函数名，避免混淆后onclick无法匹配
    }
  })],
},

方法3：禁用Webpack的tree shaking功能

如果是生产模式，Webpack默认开启usedExports来标记未使用的导出，进而被Terser删除。可以在optimization中禁用该选项：

optimization: {
  usedExports: false, // 关闭tree shaking的未使用导出标记
  minimizer: [new TerserPlugin({
    // 保持你的Terser配置
    extractComments: false,
  })],
},

注意：这种方式会全局禁用tree shaking，可能导致最终包体积变大，仅在需要保留大量全局函数时考虑使用。