JavaScript如何实现代码分割？

JavaScript代码分割主要依靠动态import()和打包工具配合，按需加载模块并生成独立chunk；支持路由懒加载（React.lazy+Suspense）、自动公共依赖提取及prefetch预加载优化体验。

JavaScript实现代码分割主要依靠动态导入（import()）和打包工具的配合，核心是把大块代码拆成小块，在需要时才加载。

使用动态 import() 按需加载模块

这是现代 JavaScript 原生支持的方式，返回一个 Promise，适合路由、按钮点击、条件逻辑等场景。

• 语法简单：const module = await import('./utils.js'); 或 import('./chart.js').then(m => m.render())
• 不能用在顶层作用域（如模块最外层），只能出现在函数或条件块内
• Webpack、Vite、Rollup 等工具会自动将其识别为分割点，生成独立 chunk 文件
• 可结合 webpack magic comments 控制 chunk 名称或预加载：/* webpackChunkName: "charts" */

在路由中做代码分割（以 React Router 为例）

单页应用中最常见的分割场景，避免一次性加载全部页面逻辑。

• 用 React.lazy() 包裹动态导入的组件：const Home = React.lazy(() => import('./Home'));
• 配合 显示加载状态：
• Vite 中无需额外配置，React.lazy + import() 同样生效；Webpack 需确保已启用 experiments.asyncWebAssembly（旧版）或默认支持

利用打包工具配置优化分割策略

工具能自动提取公共依赖、第三方库或按大小/重复度拆分，减少手动干预。

• Webpack：在 optimization.splitChunks 中设置 chunks: 'all'、minSize、cacheGroups（如单独抽离 node_modules）
• Vite：默认开启 build.rollupOptions.output.manualChunks，可自定义分组，例如把 lodash 和 axios 放进 vendor
• 注意避免过度分割：HTTP/2 下过多小 chunk 可能抵消并行优势，一般建议单个 chunk 不小于 10KB

预获取与预加载提升体验

在用户可能访问前悄悄加载资源，让后续操作更流畅。

• import('./module.js').then(...) 是“按需加载”，而 import('./module.js').then(...).catch(...) 后可加 prefetch 注释（Webpack）
• Vite 支持 import.meta.preload() 主动触发预加载
• 浏览器原生 也可手动生成，适合确定性高的路径（如登录后大概率进仪表盘）