javascript tree shaking 预加载配合的核心在于利用 import() 动态导入实现按需加载，同时通过构建工具（如 webpack、vite）的静态分析能力在编译阶段剥离未使用的代码。具体做法是：将大型库或组件拆分为多个入口，使用动态导入语法触发懒加载；配置构建工具的 optimization.splitchunks 和 sideeffects: false，确保只有被实际引用的模块被打包进最终产物。这样既减少了初始包体积，又实现了资源的按需预加载。
如何配置 sideEffects 以启用 Tree Shaking？
配置 sideEffects 为 false 可告知构建工具当前模块无副作用，从而安全地移除未引用的导出。需在 package.json 中显式声明该字段，或针对特定文件类型设置排除列表。例如，若项目中的 .css 文件仅用于样式注入且不影响逻辑，应将其加入排除列表，避免被误删。此配置直接决定哪些模块可被安全剔除。
{
"name": "my-app",
"version": "1.0.0",
"sideEffects": [
"*.css",
"src/polyfill.js"
]
}上述配置确保 .css 和 polyfill.js 不被 Tree Shaking 删除，而其他无副作用的 JS 模块可被优化。构建工具会扫描所有 ES Module 导入，若某模块未被引用且无副作用，则从输出 bundle 中移除。
立即学习“Java免费学习笔记（深入）”；
动态导入 splitChunks 如何协同工作？
动态导入 import() 与 splitChunks 协同工作时，会将动态引入的模块提取为独立 chunk，并在首次需要时异步加载。需配置 chunks: 'all' 和 minSize 阈值，确保小模块也能被拆分。例如，将路由组件按路径分割，用户访问特定页面时才下载对应代码。此机制结合 Tree Shaking，进一步减少初始加载体积。
// router/index.js
const Home = () => import('./views/Home.vue');
const About = () => import('./views/About.vue');
// webpack.config.js
module.exports = {
optimization: {
splitChunks: {
chunks: 'all',
minSize: 20000,
maxSize: 50000
}
}
};当用户导航至 /about 时，浏览器仅请求 about.chunk.js，而 home.chunk.js 不会被加载。Tree Shaking 在此过程中剔除 About.vue 中未使用的组件和方法，确保传输内容最小化。
基于动态导入返回 Promise 的具体问题
动态导入 import() 始终返回一个 Promise，即使模块已缓存也如此。这意味着开发者必须处理异步状态，不能直接同步使用返回值。例如，在 React 中需用 Suspense 包裹，或在 Vue 中使用 v-if 控制渲染时机。若忽略此特性，可能导致未定义错误或闪烁现象。正确做法是等待 Promise resolve 后再操作 DOM 或状态。
