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 输出：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

• Webpack：默认已支持 import() 拆分；建议开启 splitChunks 提取公共依赖（如多个异步模块都用了 lodash-es，会被抽成单独 vendor chunk）
• Vite：开箱即用，import() 自动转为异步 chunk，无需额外配置
• 避免手动指定 chunk name 冲突（如 import(/* webpackChunkName: "chart" */ './Chart.js') 要谨慎，重名会导致合并，反而不利于缓存

第三方库必须按需引入

很多体积问题来自“全量引入”，尤其像 lodash、moment、echarts 这类库：

• 改用 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

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南