前端代码分割：路由级懒加载怎么配置

路由级懒加载的配置只有一句话：把每个路由的组件从「顶部静态 import」改成「运行时动态 import()，返回 Promise」，Vue Router 直接写 component: () => import('./views/About.vue')，React 用 React.lazy + Suspense，或 React Router 6.4+ 的路由级 lazy 字段；同时必须给 Suspense 配 fallback、给加载失败配兜底。配完打包工具会自动把每个路由切成独立 chunk，首屏只下载当前路由的代码。

路由级懒加载怎么配？核心机制是什么

结论：路由级懒加载 = 动态 import + 路由配置接收一个返回 Promise 的函数，构建工具（webpack / Vite 走的 Rollup）看到 import() 就自动分包。

关键在于写法，而不是插件。只要你在路由表里写的是函数，而不是已经 import 好的组件引用，分包就成立了。反之，如果文件顶部仍然有 import About from './views/About.vue'，再写 component: About 是无效的——静态 import 会在首屏就被打进主包。判断方法很直接：打包产物的 index.[hash].js 体积如果没变化，说明你懒加载没生效。

Vue Router 里路由懒加载怎么写

结论：Vue Router 4 的 component 字段直接接收 () => import(...)，Vue 会自动把异步组件和 Suspense 语义处理好，不需要额外 API。

// router/index.js
const routes = [
  { path: '/', component: () => import('../views/Home.vue') },
  {
    path: '/about',
    name: 'About',
    // webpack 下可用魔法注释命名 chunk；Vite 走 Rollup，chunk 名在打包配置里控制
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

两点注意：一是同一路由下的大区块（如 Tab 页）可以再用 defineAsyncComponent(() => import('./HeavyChart.vue')) 做二级拆分，但别拆太碎，单个 chunk 建议不少于 20KB 左右才有收益；二是要给 <router-view> 外面包一层过渡或骨架屏，否则切换时会有一段白屏。

React 里路由级懒加载怎么配

结论：React 18 用 React.lazy + Suspense 是最小成本方案；React Router 6.4 及以上可以直接在路由对象上写 lazy，把组件、loader 一起异步化。

import { lazy, Suspense } from 'react';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const Home = lazy(() => import('./pages/Home'));

const router = createBrowserRouter([
  { path: '/', element: <Home /> },
  // React Router 6.4+：模块需导出 Component / loader / action
  { path: '/dashboard', lazy: () => import('./pages/Dashboard') }
]);

export default function App() {
  return (
    <Suspense fallback={<div>加载中…</div>}>
      <RouterProvider router={router} />
    </Suspense>
  );
}

React.lazy 的返回值必须是 { default: Component }，所以页面组件要用默认导出。Suspense 的 fallback 必须放在路由树的公共祖先上，放在每个页面内部会因为组件还没加载而无效。

打包配置和 chunk 命名怎么做

结论：路由的分包是自动的，但 chunk 的文件名和数量要手动收敛，否则发版后内容哈希变化会带来缓存失效和 404 问题。

webpack 侧在 output 里配两道：

output: {
  filename: 'js/[name].[contenthash:8].js',
  chunkFilename: 'js/[name].[contenthash:8].js'
}

[contenthash] 保证内容不变时文件名不变，用户缓存命中。Vite 侧则用 build.rollupOptions.output.manualChunks 把第三方库（如 react、vue 全家桶、echarts）单独拆出来，避免业务代码小改一次就让整个 vendor chunk 失效。

另外，懒加载的路由可以顺手加预取，进一步降低切换等待：webpack 下写 import(/* webpackPrefetch: true */ './views/About.vue')，Vite 下在路由跳转成功后用 requestIdleCallback 注入 <link rel="prefetch"> 手动预取目标页资源。

懒加载上线后最容易踩的坑有哪些

结论：最常见的三个问题是加载闪烁、chunk 404、以及拆得太碎反而变慢。

第一，加载闪烁：网速快时 spinner 一闪而过反而像闪屏，给 fallback 加 200ms 延迟显示更稳。第二，chunk 404：用户停留在旧版本页面，发版后旧哈希文件被删除，点击路由就报 Failed to fetch dynamically imported module，处理方式是全局监听并在捕获到该错误时 location.reload() 一次（加 sessionStorage 标记防死循环）。React 里配 ErrorBoundary 兜底，Vue 里用 router.onError 捕获。第三，粒度：把 30 个路由全拆成 30 个 chunk 会带来额外请求和解析开销，正确做法是首页、登录页这类高频入口同步打包，其余路由按业务模块懒加载，一个模块一个 chunk。

总结一下：路由级懒加载的本质是路由表里写 () => import() 而不是静态引用；Vue Router 直接写在 component，React 用 React.lazy 或 React Router 6.4+ 的 lazy；配套做三件事——contenthash 命名、vendor 分包、chunk 加载失败的 reload 兜底，最后用打包产物体积验证懒加载是否真的生效。