Vercel 团队 10 年 React 性能优化经验：10 大核心策略让性能提升 300%-程序员充电站

Vercel 最近发布了 React 最佳实践库，将十余年来积累的 React 和 Next.js优化经验整合到了一个指南中。

其中一共包含8 个类别、40 多条规则。

这些原则并不是纸上谈兵，而是 Vercel 团队在 10 余年从无数生产代码库中总结出的经验之谈。它们已经被无数成功案例验证，能切实改善用户体验和业务指标。

以下将是对你的 React 和 Next.js 项目影响最大的 10 大实践。

1. 将独立的异步操作并行

请求瀑布流是 React 应用性能的头号杀手。

每次顺序执行 await 都会增加网络延迟，消除它们可以带来最大的性能提升。

❌ 错误：

asyncfunctionPage(){constuser=awaitfetchUser();constposts=awaitfetchPosts();return<Dashboard user={user}posts={posts}/>;}

✅ 正确：

asyncfunctionPage(){const[user,posts]=awaitPromise.all([fetchUser(),fetchPosts()]);return<Dashboard user={user}posts={posts}/>;}

当处理多个数据源时，这个简单的改变可以将页面加载时间减少数百毫秒。

2. 避免桶文件导入

从桶文件导入会强制打包程序解析整个库，即使你只需要其中一个组件。

这就像把整个衣柜都搬走，只为了穿一件衣服。

❌ 错误：

import{Check,X,Menu}from"lucide-react";

✅ 正确：

importCheckfrom"lucide-react/dist/esm/icons/check";importXfrom"lucide-react/dist/esm/icons/x";importMenufrom"lucide-react/dist/esm/icons/menu";

更好的方式（使用 Next.js 配置）：

// next.config.jsmodule.exports={experimental:{optimizePackageImports:["lucide-react","@mui/material"],},};// 然后保持简洁的导入方式import{Check,X,Menu}from"lucide-react";

直接导入可将启动速度提高 15-70%，构建难度降低 28%，冷启动速度提高 40%，HMR 速度显著提高。

3. 使用延迟状态初始化

当初始化状态需要进行耗时的计算时，将初始化程序包装在一个函数中，确保它只运行一次。

❌ 错误：

functionComponent(){const[config,setConfig]=useState(JSON.parse(localStorage.getItem("config")));return<div>{config.theme}</div>;}

✅ 正确：

functionComponent(){const[config,setConfig]=useState(()=>JSON.parse(localStorage.getItem("config")));return<div>{config.theme}</div>;}

组件每次渲染都会从 localStorage 解析 JSON 配置，但其实它只需要在初始化的时候读取一次，将其封装在回调函数中可以消除这种浪费。

4. 最小化 RSC 边界的数据传递

React服务端/客户端边界会将所有对象属性序列化为字符串并嵌入到 HTML 响应中，这会直接影响页面大小和加载时间。

❌ 错误：

asyncfunctionPage(){constuser=awaitfetchUser();// 50 fieldsreturn<Profile user={user}/>;}("use client");functionProfile({user}){return<div>{user.name}</div>;// uses 1 field}

✅ 正确：

asyncfunctionPage(){constuser=awaitfetchUser();return<Profile name={user.name}/>;}("use client");functionProfile({name}){return<div>{name}</div>;}

只传递客户端组件实际需要的数据。

5. 动态导入大型组件

仅在功能激活时加载大型库，减少初始包体积。

❌ 错误：

import{AnimationPlayer}from"./heavy-animation-lib";functionComponent(){const[enabled,setEnabled]=useState(false);returnenabled?<AnimationPlayer/>:null;}

✅ 正确：

functionAnimationPlayer({enabled,setEnabled}){const[frames,setFrames]=useState(null);useEffect(()=>{if(enabled&&!frames&&typeofwindow!=="undefined"){import("./animation-frames.js").then((mod)=>setFrames(mod.frames)).catch(()=>setEnabled(false));}},[enabled,frames,setEnabled]);if(!frames)return<Skeleton/>;return<Canvas frames={frames}/>;}

typeof window可以防止将此模块打包用于SSR，优化服务端包体积和构建速度。

6. 延迟加载第三方脚本

分析和跟踪脚本不要阻塞用户交互。

❌ 错误：

exportdefaultfunctionRootLayout({children}){useEffect(()=>{initAnalytics();},[]);return(<html><body>{children}</body></html>);}

✅ 正确：

import{Analytics}from"@vercel/analytics/react";exportdefaultfunctionRootLayout({children}){return(<html><body>{children}<Analytics/></body></html>);}

在水合后加载分析脚本，优先处理交互内容。

7. 使用 React.cache() 进行请求去重

防止服务端在同一渲染周期内重复请求。

❌ 错误：

asyncfunctionSidebar(){constuser=awaitfetchUser();return<div>{user.name}</div>;}asyncfunctionHeader(){constuser=awaitfetchUser();// 重复请求return<nav>{user.email}</nav>;}

✅ 正确：

import{cache}from"react";constgetUser=cache(async()=>{returnawaitfetchUser();});asyncfunctionSidebar(){constuser=awaitgetUser();return<div>{user.name}</div>;}asyncfunctionHeader(){constuser=awaitgetUser();// 已缓存，无重复请求return<nav>{user.email}</nav>;}

8. 实现跨请求数据的 LRU 缓存

React.cache() 仅在单个请求内有效，因此对于跨连续请求共享的数据，使用 LRU 缓存。

❌ 错误：

import{LRUCache}from"lru-cache";constcache=newLRUCache({max:1000,ttl:5*60*1000,// 5 分钟});exportasyncfunctiongetUser(id){constcached=cache.get(id);if(cached)returncached;constuser=awaitdb.user.findUnique({where:{id}});cache.set(id,user);returnuser;}

这在 Vercel 的 Fluid Compute 中特别有效，多个并发请求共享同一个函数实例。

9. 通过组件组合实现并行化

React 服务端组件在树状结构中按顺序执行，因此需要使用组合对组件树进行重构以实现并行化数据获取：

❌ 错误：

asyncfunctionPage(){constdata=awaitfetchPageData();return(<><Header/><Sidebar data={data}/></>);}

✅ 正确：

asyncfunctionPage(){return(<><Header/><Sidebar/></>);}asyncfunctionSidebar(){constdata=awaitfetchPageData();return<div>{data.content}</div>;}

这样一来，页眉和侧边栏就可以并行获取数据了。

10. 使用 SWR 进行客户端请求去重

当客户端上的多个组件请求相同的数据时，SWR 会自动对请求进行去重。

❌ 错误：

functionUserProfile(){const[user,setUser]=useState(null);useEffect(()=>{fetch("/api/user").then((r)=>r.json()).then(setUser);},[]);return<div>{user?.name}</div>;}functionUserAvatar(){const[user,setUser]=useState(null);useEffect(()=>{fetch("/api/user").then((r)=>r.json()).then(setUser);},[]);return<img src={user?.avatar}/>;}

✅ 正确：

importuseSWRfrom"swr";constfetcher=(url)=>fetch(url).then((r)=>r.json());functionUserProfile(){const{data:user}=useSWR("/api/user",fetcher);return<div>{user?.name}</div>;}functionUserAvatar(){const{data:user}=useSWR("/api/user",fetcher);return<img src={user?.avatar}/>;}