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()主动触发预加载 -
浏览器原生
也可手动生成，适合确定性高的路径（如登录后大概率进仪表盘）
