不分包，自动分包，手动分包
| 模式 | 效果 |
|---|---|
| 不分包 | 所有模块打成 一个 bundle，一次性加载 |
| 自动分包 | 构建器以 import() 为边界 自动拆 chunk |
| 手动分包 | 人为指定 哪些模块必须进同一个 chunk |
一、不分包（Single Bundle，只 1 个 JS）
text
dist/
├─ index.html
└─ assets/
└─ index-9f3a21.js含义：所有页面代码 + 所有依赖一次性进这一个文件。
二、自动分包（Automatic Code Splitting，多路由 chunk + 自动公共 chunk）
text
dist/
├─ index.html
└─ assets/
├─ index-a12bc3.js # 主入口
├─ Home-3d91f2.js # Home 路由 chunk（import()）
├─ User-8a72cc.js # User 路由 chunk（import()）
├─ Report-4f3b10.js # Report 路由 chunk（import()）
└─ vendor-6c91aa.js # 公共依赖 chunk（如 lodash/axios，自动抽取）三、手动分包（Manual Code Splitting）
配置
json
build: {
rollupOptions: {
output: {
manualChunks: {
react: ["react", "react-dom", "react-router-dom"],
},
},
},
},
})dist
text
dist/
├─ index.html
└─ assets/
├─ index-e72c19.js
├─ react-2f18aa.js