javascript tree shaking 处理 polyfill 的核心原则是避免将全局注入的 polyfill 代码打包进应用，而是通过构建工具或运行时按需加载。具体做法是使用 @babel/preset-env 配合 usebuiltins: 'usage' 自动引入所需 polyfill，或者使用 core-js 的模块化导入方式手动控制。这样能确保只有当前环境缺失且代码中实际用到的 api 才会被包含在最终产物中。
@babel/preset-env 如何自动注入 polyfill
当配置 @babel/preset-env 时，设置 useBuiltIns: 'usage' 可以让 Babel 扫描源码，发现使用了如 Promise 或 Array.prototype.includes 等特性，并根据目标浏览器环境自动插入对应的 core-js 引入语句。这种方式无需开发者手动管理引入位置，Babel 会在文件顶部添加必要的 import。
import { createApp } from 'vue';
// 使用了一个较新的数组方法
const data = [1, 2, 3];
const hasTwo = data.includes(2);
createApp({
template: '<div>{{ hasTwo }}</div>'
}).mount('#app');
在上述 Vue 组件中，我们调用了 data.includes(2)。如果目标环境不支持该方法，Babel 会根据配置自动在文件头部生成类似 import "core-js/modules/es.array.includes.js"; 的代码。最终打包后的文件将只包含这个特定的 polyfill，而不是整个 core-js 库。这显著减少了包体积，同时保证了兼容性。
立即学习“Java免费学习笔记（深入）”；
手动指定 core-js 版本与入口
除了自动注入，开发者也可以显式指定 core-js 的版本和入口点，以获得更精细的控制。通常建议在项目根目录或入口文件中统一引入所需的 polyfill 模块，例如 import 'core-js/features/array/includes';。这种方法适用于需要严格管控 polyfill 范围的场景，避免意外引入未使用的代码。
// main.js
import 'core-js/features/promise';
import 'core-js/features/string/replace-all';
import App from './App.vue';
new Vue({
render: h => h(App)
}).$mount('#app');
在入口文件 main.js 中，我们显式引入了 promise 和 string/replace-all 的 polyfill。无论组件内部是否直接使用这些 API，只要它们在入口中被引用，就会被打包进去。这种策略适合那些依赖全局 API 或需要在所有页面生效的功能。通过这种方式，我们可以精确地决定哪些 polyfill 应该存在于最终的应用程序中，从而平衡兼容性与性能。
Tree Shaking 对动态导入 Polyfill 的影响
当使用动态导入（Dynamic Import）来加载 polyfill 时，Tree Shaking 的行为会受到一定影响。由于动态导入是在运行时解析的，构建工具可能无法在静态分析阶段确定哪些 polyfill 是必需的。因此，如果 polyfill 是通过条件判断或动态路径引入的，它们可能会被全部打包，或者完全不被打包，取决于具体的配置和工具链实现。
