如何将TypeScript转译ES5的重复Helper方法移入共享Bundle？

你遇到的这个问题是TypeScript+Webpack编译ES+到ES5时非常常见的冗余问题——默认情况下，TS会把__decorate、__awaiter这些辅助函数内嵌到每个输出的模块Bundle里，导致大量重复代码。好在我们有成熟的方案把这些Helper统一抽离到一个共享Bundle中，既减少体积又能利用浏览器缓存。下面给你两种最常用的实现方式：

方案一：用TypeScript自带的importHelpers + Webpack SplitChunks #

这是纯TS场景下最直接的方案，核心是让TS从tslib包中导入Helper函数，而不是每个文件都内嵌，再通过Webpack把tslib抽成单独的共享Bundle。

步骤： #

1. 安装tslib依赖：
   tslib是TS官方提供的包含所有转译Helper的工具包，先安装它：

   npm install tslib --save
   

2. 修改tsconfig.json开启importHelpers：
   在你的TypeScript配置中添加这个选项，告诉TS不要内嵌Helper，而是从tslib导入：

   {
     "compilerOptions": {
       "importHelpers": true,
       "target": "ES5", // 你的目标版本
       "module": "ESNext", // 配合Webpack的模块解析
       // 其他你的配置项...
     }
   }
   

3. 配置Webpack的splitChunks抽离共享Bundle：
   在Webpack配置中，把tslib单独拆分出来作为共享Bundle，这样所有业务模块都会引用它，而不是重复内嵌Helper：

   // webpack.config.js
   module.exports = {
     // 其他配置：entry、output、module.rules...
     optimization: {
       splitChunks: {
         chunks: 'all', // 对所有类型的chunk生效
         cacheGroups: {
           // 抽离node_modules里的第三方包
           vendor: {
             test: /[\\/]node_modules[\\/]/,
             name: 'vendors',
             chunks: 'all',
             priority: -10
           },
           // 单独抽离tslib，优先级比vendor高，确保它被单独拆分
           tslib: {
             test: /[\\/]node_modules[\\/]tslib[\\/]/,
             name: 'tslib',
             chunks: 'all',
             priority: 0
           }
         }
       }
     }
   };
   

配置完成后，你会发现每个业务Bundle（比如1.js、2.js）里的Helper函数都变成了类似import * as tslib_1 from "tslib";的引用，而所有重复的Helper都统一放在tslib.js这个共享Bundle里。

方案二：用Babel的@babel/plugin-transform-runtime（适合同时用Babel的场景） #

如果你的项目同时用Babel处理语法转译（比如兼容一些TS未覆盖的ES+语法），可以用Babel的这个插件把TS和Babel的Helper都抽离到@babel/runtime包中，同样配合Webpack拆分。

步骤： #

1. 安装依赖：

   # 开发依赖：插件本身
   npm install @babel/plugin-transform-runtime --save-dev
   # 生产依赖：runtime包，包含Helper函数
   npm install @babel/runtime --save
   

2. 修改Babel配置：
   在.babelrc或babel.config.json中启用插件，并配置相关选项：

   {
     "plugins": [
       ["@babel/plugin-transform-runtime", {
         "helpers": true, // 抽离Helper函数
         "regenerator": true, // 抽离async/await的regeneratorRuntime
         "useESModules": false, // 因为要输出ES5，禁用ES模块格式
         "corejs": false // 如果需要polyfill可以设为3，需额外安装@babel/runtime-corejs3
       }]
     ]
   }
   

3. Webpack配置SplitChunks：
   和方案一类似，把@babel/runtime抽成共享Bundle：

   // webpack.config.js
   module.exports = {
     optimization: {
       splitChunks: {
         chunks: 'all',
         cacheGroups: {
           vendor: {
             test: /[\\/]node_modules[\\/]/,
             name: 'vendors',
             chunks: 'all',
             priority: -10
           },
           babelRuntime: {
             test: /[\\/]node_modules[\\/]@babel[\\/]runtime[\\/]/,
             name: 'babel-runtime',
             chunks: 'all',
             priority: 0
           }
         }
       }
     }
   };
   

额外说明 #

• 两种方案都能有效减少重复代码，降低总Bundle体积；
• 共享Bundle（比如tslib.js或babel-runtime.js）内容稳定，浏览器可以长期缓存，后续业务Bundle更新时无需重新下载；
• 如果是多入口或多模块输出的场景，Webpack会自动处理依赖关系，业务Bundle会自动加载对应的共享Bundle。

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