17370845950

JavaScript 代码分割主要通过动态导入（import()）实现，它返回 Promise 实现按需加载；支持变量路径拼接但需静态可分析，配合 Webpack/Vite 自动分包并可通过魔法注释优化，适用于路由、组件及条件加载场景，且可结合 try/catch 管理错误与加载状态。

JavaScript 的代码分割主要通过动态导入（import()）实现，它返回一个 Promise，让模块按需加载，而不是在初始加载时全部打包进来。

动态导入的基本语法

动态导入使用函数式调用 import()，接收模块路径字符串，返回 Promise：

• import('./module.js') 加载成功后 resolve 模块对象
• 路径支持变量拼接（如 import(`./pages/${page}.js`)），但不能是完全动态的表达式（Webpack/Vite 需在构建时能静态分析）
• 不支持直接解构，需先 await 再取值：const { init } = await import('./utils.js')

配合 Webpack 或 Vite 自动分割

现代构建工具会把 import() 调用识别为分割点，自动生成独立 chunk：

• Webpack 中无需额外配置，import() 默认触发 code splitting
• Vite 同样原生支持，生成的 chunk 会带 hash，自动处理加载和缓存
• 可配合魔法注释优化行为，例如：import(/* webpackChunkName: "login" */ './login.js') 指定 chunk 名

常见使用场景

动态导入适合延迟加载非首屏依赖：

• 路由级拆分：React Router / Vue Router 的 lazy loading 就基于 import()
• 组件级拆分：点击按钮后才加载富文本编辑器、图表库等重型模块
• 条件加载：根据用户权限或设备特性加载不同模块，如 import('./mobile-layout.js')

错误处理与加载状态

因为返回 Promise，可以自然使用 try/catch 和 loading 状态管理：

• 加载中显示 skeleton 或 loading 提示
• 捕获失败并降级，例如 fallback 到轻量实现或提示用户重试
• 避免未处理的 Promise rejection，尤其在 React 中可能触发错误边界