“副作用导入”指不导出值、仅执行全局补丁的 import 语句,如 import 'core-js/stable';必须置于入口文件顶部同步执行,支持细粒度引入以控体积,禁用废弃或 CDN 方式。

直接用 import 'core-js/stable' 或 import 'regenerator-runtime/runtime' 就能实现全局 Polyfill 的静默注入——它不导出任何值,只执行内部代码,修改全局环境,让 Array.from、Promise、Object.assign 等特性在旧浏览器中可用。
为什么叫“副作用导入”
这类 import 语句没有 as、from 后的变量接收,也不调用函数或赋值给变量。它的唯一目的就是触发模块内部的执行逻辑:
- core-js/stable 会遍历检测当前运行时缺失的 API,并补全构造函数、原型方法和静态方法
- regenerator-runtime/runtime 注册 async/await 所需的运行时辅助函数(如
wrap、mark) - 所有补丁都在全局作用域生效,后续任意模块都能直接使用
Promise.allSettled或String.prototype.replaceAll
正确写法与位置要求
必须放在项目入口文件(如 index.js 或 main.ts)的最顶部,且早于任何业务代码执行:
- ✅ 正确:第一行就写
import 'core-js/stable'; import 'regenerator-runtime/runtime'; - ❌ 错误:放在某个工具函数内部、条件语句里,或被 webpack 的
splitChunks拆到异步 chunk 中 - ⚠️ 注意:不能用
require()动态加载,也不能包裹在async函数里——Polyfill 必须同步、立即、无条件生效
避免污染与体积失控的实用控制
全量 stable 并非总是最优。可通过更细粒度路径精准注入,兼顾兼容性与体积:
- 只补语言特性:
import 'core-js/stable/array/from'; import 'core-js/stable/promise'; - 只补 Web API:
import 'core-js/stable/fetch'; import 'core-js/stable/web/url'; - 配合 Babel 使用:
useBuiltIns: 'usage'时,这些 import 会被自动替换为实际用到的模块,无需手动枚举
不推荐的替代方式
有些做法看似简洁,实则隐患明显:
-
import '@babel/polyfill'—— 已废弃,会全量引入并污染全局,且无法 tree-shake -
import 'core-js'—— 缺少/stable后缀,可能漏掉部分修复(如Array.prototype.at的稳定版补丁) - 通过 HTML script 标签引入 CDN 版本 —— 无法与构建流程协同,丢失 sourcemap 和版本锁定能力

















