使用者痛点：首屏加载虽快，却在页面跳转时出现白屏、卡顿、甚至掉帧；业务团队所以收到大量负面反馈，转化率直线下降。

路由性能调整，本质上是一场资源调度博弈——在带宽、CPU 与使用者等待阈值之间找到最优解。其实，

从第一层来看，路由懒加载 —— 不只是 => import而是 Chunk 策略的艺术

再看底层原理。Webpack vs Vite 的分包逻辑

动态 import 本质上是将代码分割点交给打包工具。Webpack 会基于 Magic Comments 生成独立的 Chunk；Vite 则利用浏览器的 ES Module 原生加载能力。在开发环境无需打包，在生产环境使用 Rollup 进行分包。

从进阶配置来看，告别 vendors~about.js 的混乱命名

合理命名 Chunk 不仅为了好看。更为了长期缓存策略和可视化管理.

// ============ Vue + Vite 推荐写法 ============
// 利用 Vite 的 glob import 自动生成路由，并自定义 chunk 名称
const modules = import.meta.glob('../views/**/*.vue',{
从eager来看，false,import: 'default'
});其实，// 动态生成路由：方法 /views/dashboard/index.vue -> chunk 名为 "dashboard"
const routeGenerator = => {
const comp = modules;return {
path的观点是，`/${path}`,component: comp,// Vite 不支持 webpackChunkName。但可以在 build.rollupOptions.output.chunkFileNames 中统一用 -
};}，// ============ React + Webpack 推荐写法 ============
const Dashboard = lazy =>
import
);// 配合 webpack 的 optimization.splitChunks 将高频库单独提取为 vendor 包

再看被忽视的陷阱，网络瀑布流

If you don’t intervene。lazy loading creates a **bottleneck waterfall**:

• HTML → 主 Bundle → 路由 Chunk → 图片/字体
• The single network thread queues JS downloads during navigation,causing dreaded “切换慢”。

第二层这方面。智能预加载 —— 用“使用者行为预测”打败网络延迟

User Pain Point: 在网络空闲时错误地 prefetch 大量资源，会抢占首屏关键资源导致 LCP 飙升。

深究  vs 

• preload: 高优先级，立即请求；适用于当前路由必须的字体、Logo、主要 CSS。
• prefetch: 最低优先级，仅在浏览器空闲时下载；适用于未来可能访问的路由。
• Error 示例：prefetch` → 带宽饱和。首屏关键图片被阻塞，LCP 爆表。

悬停预加载 + 防抖

// React 自定义 Hook：useLazyPrefetch
import { useCallback,useRef } from 'react';function useLazyPrefetch => Promise,delay = 200) {
const timerRef = useRef;其实，const prefetch = useCallback => {
if clearTimeout;timerRef.current = setTimeout => {
importFn.catch);},delay)，},);const cancelPrefetch = useCallback => {
if clearTimeout;},)，return { prefetch,cancelPrefetch };}
// 在组件中使用
 prefetch}
onMouseLeave={ => cancelPrefetch}
onFocus={ => prefetch} // 键盘导航适配
>
Dashboard

视口预加载这方面，利用 Intersection Observer

// Vue 指令式预加载
const vPrefetchWhenVisible = {
mounted {
const observer = new IntersectionObserver => {
if {
// 动态导入传入的路由
binding.value;observer.disconnect;}
},{ rootMargin: '50px' });// 提前 50px 加载
observer.observe;
}
}，// 使用方式

说到第三层，渲染性能硬核调整 —— 当 JS 已就绪。主线程却着火了

User Pain Point: 页面出现明显掉帧，导致交互不流畅，即使网络已完成资源下载。

虚拟滚动的极致选型

• Vue：@tanstack/vue-virtual 或
• React：@tanstack/react-virtual

// React + TanStack Virtual 完整示例
import { useVirtualizer } from '@tanstack/react-virtual';import { useRef } from 'react';老实说，function LargeTable {
const parentRef = useRef;const virtualizer = useVirtualizer({
再看count，rows.length,getScrollElement: => parentRef.current。estimateSize: => 48,// 行高预估
overscan: 5 // 上下多渲染几行防止快速滚动白屏
});return (


{virtualizer.getVirtualItems.map(virtualRow => (

{rows.name}

))}


);}

组件渲染“分帧执行”——避免一次性阻塞主线程

// 分步渲染工具函数
function renderInBatches=>void){
let index=0;function processBatch{
const end=Math.min;for{
renderFn;}
index=end，if{
if{
requestIdleCallback;}else{
requestAnimationFrame;}
}
}
processBatch;老实说，}

Keep‑alive 的内存泄漏防范教程

The

// ❌ 串行耗时=600ms+400ms=1000ms
const user = await fetchUser;const permissions = await fetchPermissions;// ✅ 并行耗时=max=600ms
router.beforeEach => {
const = await Promise.all();// ...校验逻辑
next;})，

// React Router + Data Loader 示例
const userLoader = async => {
const controller = new AbortController;request.signal.addEventListener => controller.abort);try{
const res = await fetch;return res.json;}catch{
if console.log;throw err，}
};