JavaScript代码分割核心是动态import()语法，由Webpack/Vite等构建工具识别并拆分为独立chunk，实现路由级、组件级、工具函数级按需加载，显著减小首屏体积。
模块按需加载本身不是“配置出来”的，而是通过编码方式 + 构建工具识别共同实现的。核心是让代码在运行时才触发加载，构建工具（如 Webpack、Vite）会自动把 import() 语句拆成独立 chunk，从而减小主包体积。
用动态 import() 替代静态 import
这是最直接、最通用的方式。静态 import 会在构建时被全部打包进主 bundle；而 import() 是函数调用，构建工具能识别它为异步加载点，生成单独文件。
- 路由级：React Router 中用
lazy(() => import('./Page'))，Vue Router 用component: () => import('./Page.vue') - 组件级：弹窗、图表、富文本编辑器等非首屏内容，封装成异步组件或点击时再加载
- 工具函数级：比如只在导出 Excel 时才加载
xlsx库，就写const XLSX = await import('xlsx')
配合构建工具启用代码分割
光写 import() 不够，得确保构建配置支持并优化 chunk 输出：
- Webpack：默认已支持
import()拆分；建议开启splitChunks提取公共依赖（如多个异步模块都用了lodash-es，会被抽成单独 vendor chunk） - Vite：开箱即用，
import()自动转为异步 chunk，无需额外配置 - 避免手动指定 chunk name 冲突（如
import(/* webpackChunkName: "chart" */ './Chart.js')要谨慎，重名会导致合并，反而不利于缓存
第三方库必须按需引入
很多体积问题来自“全量引入”，尤其像 lodash、moment、echarts 这类库：
立即学习“Java免费学习笔记（深入）”；
- 改用
lodash-es并只导入需要的函数：import { debounce, throttle } from 'lodash-es' - 替换
moment→date-fns或dayjs（后者支持插件式按需加载） -
echarts推荐用官方提供的按需引入方式：import * as echarts from 'echarts/core'+ 单独引入图表和组件
验证是否生效
别只看代码写了 import() 就以为成功了，要实际检查输出结果：
- 构建后查看 dist 目录，确认生成了多个
xxx.chunk.js文件 - 用
webpack-bundle-analyzer或 Vite 的build.report插件打开体积分析报告，观察主包是否变小、新 chunk 是否合理分布 - 浏览器 Network 面板中，触发对应操作（如点按钮），确认加载的是新 chunk 而非整个 bundle
