JavaScript 中 Vite 怎么实现路由懒加载分包策略-js教程-PHP中文网

vite 中路由懒加载分包需用动态 import() 配合框架异步组件，如 vue 的 import() 或 react 的 lazy；支持 webpackchunkname 注释命名 chunk；按模块组织路由提升分包合理性；可选 manualchunks 提取公共依赖。

javascript 中 vite 怎么实现路由懒加载分包策略

在 Vite 项目中实现路由懒加载分包，核心是结合 动态 import() 与 Vue Router（或 React Router）的异步组件能力，让每个路由对应的模块独立打包成 chunk，按需加载。

1. 基于动态 import 的路由组件定义

不要直接 `import` 组件，改用 `defineAsyncComponent`（Vue）或 `lazy`（React），底层依赖 `import()` 表达式。Vite 会自动将 `import('./xxx.vue')` 或 `import('./pages/Home.jsx')` 编译为单独的 chunk 文件。

Vue 示例（Vue Router 4）：

const routes = [
  {
    path: '/home',
    component: () => import('@/views/Home.vue') // ✅ 触发代码分割
  },
  {
    path: '/user',
    component: () => import('@/views/User.vue')
  }
]

React 示例（React Router 6 + Suspense）：

const Home = React.lazy(() => import('@/pages/Home'))
const User = React.lazy(() => import('@/pages/User'))
<p>// 路由配置中使用 <suspense> 包裹 Outlet</suspense></p>

2. 利用 Webpack 风格的注释控制 chunk 名称（推荐）

Vite 兼容 /* webpackChunkName: "xxx" */ 注释（实际由 Rollup 插件支持），可显式命名生成的 chunk，便于调试和缓存管理。

Java Development Manual

Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...

下载

命名后构建产物中会出现 chunk-home.abc123.js 这类可读文件名
相同 chunkName 的多个 import 会被合并到同一个包

component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue')

3. 按功能/模块组织路由，自然形成分包边界

避免把所有页面都平铺在根路由下。合理嵌套、拆分子路由，配合动态 import，能更精细地控制分包粒度。

例如：用户中心模块下的所有页面统一用 import('@/modules/user/...')，配合相同 chunkName，打包为一个 user-bundle
后台管理、仪表盘、权限相关页面也可各自归组

4. 配合 Vite 构建配置优化分包行为（可选）

Vite 默认已启用代码分割，但可通过 build.rollupOptions.output.manualChunks 进一步定制公共依赖提取策略，防止重复打包。

比如把 vue、vue-router、pinia 提取为 vendor 包
把大型 UI 库（如 Element Plus）单独拆出，避免塞进每个页面 chunk

// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router', 'pinia'],
          element: ['element-plus']
        }
      }
    }
  }
})

不复杂但容易忽略的是：确保开发时开启 HMR 正常工作 —— Vite 对动态 import 的热更新支持良好，无需额外配置。只要组件导出规范（默认导出），懒加载路由就能热更新生效。