Webpack 遇到 import` 时会自动将目标模块及其依赖抽成单独的 chunk 文件。建立产物从一个大文件变成了主文件 + 若干异步 chunk。

Webpack Magic Comments

User Pain Point: 如果不加控制，生成的大量 chunk 会在移动网络下产生请求风暴。

• // . webpackChunkName：给 chunk 指定可读的名字 const AdminPage = => import( /* webpackChunkName: "admin" */ './pages/Admin');// 输出：admin..js
• // . webpackPrefetch：在浏览器空闲时预加载 const SettingsPage = => import( /* webpackChunkName: "settings" */ /* webpackPrefetch: true */ './pages/Settings');// 在 注入
• // . webpackPreload：与父 chunk 并行加载 const HeroChart = => import( /* webpackChunkName: "hero-chart" */ /* webpackPreload: true */ './components/HeroChart');按理说，// 在 注入

No annotation 执行到该位置才发起请求 低 极少访问或仅用于特定交互 webpackPrefetch 父 chunk 加载完后浏览器空闲时低优先级下载 中 使用者很可能接下来访问但不是当前必需 webpackPreload 与父 chunk 并行下载。高优先级 高 当前页面大概率会用到

A common misuse is adding **prefetch** to every async chunk. With dozens of routes,browser may fire dozens of requests simultaneously on a flaky mobile network—exactly what you want to avoid.

React.lazy + Suspense 路由级代码分割

User Pain Point: 在没有懒加载时大型后台程序往往一次性拉取数十 MB 的脚本，让移动端卡死。

// src/App.tsx
import React。{ Suspense,lazy } from 'react';其实，import { BrowserRouter,Routes,Route。Navigate } from 'react-router-dom';
import { MainLayout } from './layouts/MainLayout';import { LoadingSpinner } from './components/LoadingSpinner';import { ErrorBoundary } from './components/ErrorBoundary';// 路由级别懒加载
const HomePage = lazy => import);const ProductListPage = lazy => import);const ProductDetailPage = lazy => import);const AdminDashboard = lazy => import);const UserSettings = lazy => import);function App {
return (

{/* ErrorBoundary 必须在 Suspense 外层 */}

{/* 通用布局 */}

{/* 页面切换期间展示轻量 loading */}
}>
{/* 路由配置 */}

} />
} />
} />
} />
{/* 管理后台通常为低频访问，可进一步 prefetch */}
} />
{/* 未匹配路由回首页 */}
} />



);}
export default App;

• 第一：ErrorBoundary 必须包在 Suspense 外面。当网络异常导致 chunk 加载失败时React.lazy 会抛出错误。如果没有兜底，会出现白屏。下面是一个最小实现：

// src/components/ErrorBoundary.tsx
import React。{ Component,ReactNode } from 'react';interface Props { children: ReactNode;}
interface State { hasError: boolean;error: Error | null;}
class ErrorBoundary extends Component{
state这方面。State = { hasError:false,error:null };static getDerivedStateFromError: State{
return { hasError:true,error };}
handleRetry ==>{ this.setState;}，其实，render{
if{
return (


页面加载失败

请检查网络连接后重试
重新加载

);}
return this.props.children;}}
export { ErrorBoundary };

• 第二：Suspense fallback 必须极简——不能再依赖任何异步模块，否则会形成死循环。例如一个轻量 CSS 动画 spinner 就足够，不要在 fallback 中使用 Ant Design 那种内部仍会异步拉取图标字体的大组件。

• 第三：Suspense 边界要合理划分——既不能全局只有一个，也不能每个子组件都单独套一层。推荐按“功能区块”划分，例如侧边栏保持常驻。只为右侧内容区设置独立边界，以避免侧边栏闪烁。

// 示例：管理后台独立 Suspense 边界
function AdminDashboard{
return (

{/* 永久展示侧边栏 */}

 {/* 内容区域使用独立 Suspense */}

}>

"element="{AdminOverview}" /&


...