JavaScript 中怎么在 Vite 中实现按需加载的异步组件与路由配置-js教程-PHP中文网

Vite 中按需加载异步组件与路由配置的核心是动态 import() 结合框架路由懒加载语法：Vue 项目直接在路由 component 中使用 () => import('./xxx.vue')，Vite 自动拆分 chunk；React 项目需配合 lazy + Suspense，并在顶层包裹 Suspense；可通过 / webpackChunkName: "xxx" / 注释命名 chunk，build 后通过 dist 目录或 Network 面板验证。

javascript 中怎么在 vite 中实现按需加载的异步组件与路由配置

在 Vite 中实现按需加载的异步组件与路由配置，核心是结合 动态 import() 与 Vue Router 的懒加载语法（或 React Router 的 lazy + Suspense），让组件只在路由匹配时才加载，减少首屏体积。

Vue 项目：用 defineAsyncComponent + 路由懒加载

Vue 官方推荐在路由中直接使用动态 import()，无需额外封装。Vite 会自动将该模块拆分为独立 chunk：

确保已安装 vue-router@4
路由配置中，组件字段写成函数形式：() => import('./views/Home.vue')
Vite 会识别该语法，生成单独的 JS chunk（如 Home.abc123.js）

示例（router/index.ts）：

import { createRouter, createWebHistory } from 'vue-router'
<p>const routes = [
{
path: '/',
component: () => import('@/views/Home.vue') // ✅ 自动按需加载
},
{
path: '/about',
component: () => import('@/views/About.vue')
}
]</p><p>export default createRouter({
history: createWebHistory(),
routes
})</p>

React 项目：配合 Suspense + lazy

React 需借助 React.lazy 和实现路由级懒加载。Vite 默认支持，无需额外插件：

Java Api Extractor

从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

下载

用 React.lazy(() => import('./pages/Dashboard')) 包裹组件
所有懒加载组件必须放在内渲染
推荐在顶层路由出口（如下）包裹一层

示例（main.tsx 或路由文件）：

import { lazy, Suspense } from 'react'
import { createBrowserRouter } from 'react-router-dom'
<p>const Home = lazy(() => import('./pages/Home'))
const Profile = lazy(() => import('./pages/Profile'))</p><p>export const router = createBrowserRouter([
{
path: '/',
element: (
<suspense fallback="{</p"><div>Loading...</div>}><home></home>
    )
  },
  {
    path: '/profile',
    element: (
      <suspense fallback="{<div">Loading...}><profile></profile></suspense>
    )
  }
])</suspense></p>

优化：给动态 import 添加 webpackChunkName 注释（Vite 兼容）

Vite 支持 /* @vite-ignore */ 和 /* webpackChunkName: "xxx" */ 注释（用于命名 chunk，便于调试和缓存管理）：

写法：() => import(/* @vite-ignore */ /* webpackChunkName: "user" */ './views/User.vue')
Vite 会保留该注释，并将 chunk 命名为 user.[hash].js
注意：@vite-ignore 是可选的，仅当编辑器报错时添加（避免 TS 报 warning）