<p>资源分包按路由动态拆分，本质是让每个路由只加载自己所需的代码，不带无关逻辑进首屏。核心靠动态 import() 触发打包工具自动切 chunk，再配合路由配置完成加载时机控制。路由配置中直接使用动态 import 是最直接、最通用的方式。现代路由库（React Router、Vue Router、Nuxt、Next.js）都支持函数式组件定义，内部自动识别动态导入并生成独立 JS 文件。Vue Router 示例：{ path: '/user', component: () => import('@/views/UserProfile.vue') }；React Router 示例：<Route path="/order" element={<Suspense fallback={...}><OrderPage /></Suspense>} />，其中 OrderPage 用 React.lazy(() => import('./OrderPage')) 包裹。注意：不要在顶层写 import(...)，必须包裹在函数里，否则打包工具无法识别为异步模块。给 chunk 命名提升可维护性：默认生成的 chunk 名是数字（如 2.a1b2c3.js），不利于定位和缓存管理。加注释指令可指定名称：Webpack 中：() => import(/ webpackChunkName: "user-module" / './UserModule.vue')；Vite 中同样支持该语法，会生成 user-module.[hash].js。多个相关路由可共用 chunk 名，比如仪表盘下的子页都标 "dashboard"，打包时自动合并</p>
资源分包按路由动态拆分，本质是让每个路由只加载自己所需的代码，不带无关逻辑进首屏。核心靠动态 import() 触发打包工具自动切 chunk，再配合路由配置完成加载时机控制。
路由配置中直接使用动态 import
这是最直接、最通用的方式。现代路由库（React Router、Vue Router、Nuxt、Next.js）都支持函数式组件定义，内部自动识别动态导入并生成独立 JS 文件。
- Vue Router 示例：
{ path: '/user', component: () => import('@/views/UserProfile.vue') } - React Router 示例：
<Route path="/order" element={<Suspense fallback={...}><OrderPage /></Suspense>} />，其中OrderPage用React.lazy(() => import('./OrderPage'))包裹 - 注意：不要在顶层写
import(...)，必须包裹在函数里，否则打包工具无法识别为异步模块
给 chunk 命名提升可维护性
默认生成的 chunk 名是数字（如 2.a1b2c3.js），不利于定位和缓存管理。加注释指令可指定名称：
- Webpack 中：
() => import(/* webpackChunkName: "user-module" */ './UserModule.vue') - Vite 中同样支持该语法，会生成
user-module.[hash].js - 多个相关路由可共用 chunk 名，比如仪表盘下的子页都标
"dashboard"，打包时自动合并到同一文件
结合预加载策略优化体验
拆完后要避免用户点开新路由时明显卡顿，得主动干预加载时机：
-
preload：用于当前路由“马上要用”的资源，比如首页跳转前就预加载登录弹窗组件 —— 加
/* webpackPreload: true */ -
prefetch：用于用户大概率后续访问的路由，比如个人中心页 prefetch “修改密码”页 —— 加
/* webpackPrefetch: true */ - 两者都由浏览器自动调度，无需手动 await，但需评估是否真有必要，避免带宽浪费
避免常见陷阱
拆得不对反而拖慢性能，几个关键点要盯住：
- 别把高频共用逻辑（如请求封装、权限校验）塞进单个路由文件，应保留在主包或抽成 shared chunk
- 慎用过度细粒度拆分，比如每个按钮点击都 import 一个工具函数，会导致大量小文件和请求，得不偿失
- 确保服务端支持按需返回 JS 文件（如 Nginx 配置正确 MIME 类型、CORS 允许），否则 404 会静默失败
- 上线前用
webpack-bundle-analyzer或 Vite 的--report查看实际分包结果，验证路由 chunk 是否真的隔离
