JavaScript代码分割通过动态导入（import()）实现按需加载，减少首屏时间；支持路由懒加载、预加载（prefetch/preload）及产物验证，需避免重复打包共用模块。
JavaScript代码分割通过将大体积的打包文件拆分为更小、按需加载的块，显著减少首屏加载时间。动态导入（import()）是实现这一目标的核心手段，它让模块在运行时才被加载，而非构建时静态引入。
动态导入的基本用法
与静态 import 不同，import() 返回一个 Promise，支持在条件判断、事件响应或路由切换等时机触发加载：
- 语法简单：
const module = await import('./utils.js');或import('./utils.js').then(module => {...}) - 路径必须是字符串字面量（不能是变量拼接），否则 Webpack/Vite 无法在构建时分析并生成对应 chunk
- 常用于组件级懒加载，例如点击按钮后才加载图表库，避免首页白屏等待
结合路由实现按需加载
在单页应用中，不同页面通常依赖不同逻辑和组件。使用动态导入配合路由可精准控制资源加载时机：
- React Router v6.4+：用
lazy+Suspense包裹异步组件，内部即基于import() - Vue Router：路由配置中直接写
component: () => import('./About.vue') - 效果明显：访问首页时只加载核心框架和 Home 组件，进入“报表”页才拉取 ECharts 相关代码
预加载与 prefetch 的优化技巧
动态导入默认是“惰性加载”，但某些场景下可提前提示浏览器准备资源：
立即学习“Java免费学习笔记（深入）”；
-
import(/* webpackPrefetch: true */ './Modal.js')（Webpack）或import('./Modal.js', { with: { 'prefetch': true } })（Vite 5.2+）会在空闲时预取，适合用户大概率会访问的模块 -
import(/* webpackPreload: true */ './Critical.js')会以注入，适用于即将立即使用的资源，优先级高于 prefetch - 注意滥用 prefetch 会增加无谓请求，应结合用户行为数据判断是否启用
检查分割效果与常见陷阱
验证代码是否真正分割成功，不能只看写法，还要看产物和网络请求：
- 构建后查看 dist 目录是否有多个
xxx.chunk.js文件，或使用 Webpack Bundle Analyzer 可视化分析 - 打开 Chrome DevTools → Network 标签，刷新页面，观察 JS 请求是否随交互逐步出现，而非全部在 initial HTML 后立刻发起
- 避免把频繁共用的工具函数写进动态导入模块，否则可能重复打包；可提取到独立 shared chunk 中
