如何用代码分割（Code Splitting）实现路由级的按需加载-js教程-PHP中文网

react router v6中唯一可靠方案是lazy+suspense，不可手写import()；需用suspense包裹routes并设fallback，lazy仅接受无参promise函数，webpack需加/ webpackchunkname /注释控制chunk名，ssr下lazy失效须换loadable-components或next.js dynamic。

如何用代码分割（code splitting）实现路由级的按需加载

React Router v6 中 `lazy` + `Suspense` 是唯一可靠方案

不推荐手写 import() 动态导入再自己管理加载状态，React Router v6 官方只支持与 lazy 和 Suspense 配合的路由级分割。直接在 Route 中用 element 渲染异步组件会报错或白屏——因为 element 要求是已解析的 React 元素，不是 Promise。

正确做法是：用 lazy 包裹动态导入，再用 Suspense 套住整个 Routes，并提供 fallback。

lazy 只接受一个返回 Promise 的函数，不能传参数、不能做条件判断
Suspense 必须包裹所有可能触发 lazy 加载的 Route，位置不能太深（比如不能只包某个子路由）
如果在 Suspense 外层有未包裹的同步路由，它们仍会立即加载，不影响分割效果

const Home = lazy(() => import('./pages/Home'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
<p>function App() {
return (
<router><suspense fallback="{<Spinner"></suspense>}>
<routes><route path="/" element="{<Home"></route>} />
<route path="/dashboard" element="{<Dashboard"></route>} />
</routes></router>
);
}</p>

Webpack 打包后 chunk 名称不可控？加 `/* webpackChunkName */` 注释

默认情况下，import('./pages/Home') 生成的 chunk 文件名是 src_pages_Home_js.[hash].js，难读、难定位、不利于 CDN 缓存策略。必须显式添加 Webpack 特殊注释来指定 chunk 名。

注释必须紧贴 import()，且格式严格：/* webpackChunkName: "Home" */，引号不能少
名称中不要含斜杠或特殊字符，否则 Webpack 会静默失败，回退到默认命名
同名 chunk 会被合并，比如两个地方都写了 /* webpackChunkName: "shared" */，就会打到同一个文件里

const Home = lazy(() =>
  import(/* webpackChunkName: "Home" */ './pages/Home')
);
const Layout = lazy(() =>
  import(/* webpackChunkName: "Layout" */ './components/Layout')
);