Vercel 最近发布了 React 最佳实践库将十余年来积累的 React 和 Next.js优化经验整合到了一个指南中。其中一共包含8 个类别、40 多条规则。这些原则并不是纸上谈兵而是 Vercel 团队在 10 余年从无数生产代码库中总结出的经验之谈。它们已经被无数成功案例验证能切实改善用户体验和业务指标。以下将是对你的 React 和 Next.js 项目影响最大的 10 大实践。1. 将独立的异步操作并行请求瀑布流是 React 应用性能的头号杀手。每次顺序执行 await 都会增加网络延迟消除它们可以带来最大的性能提升。❌ 错误asyncfunctionPage(){constuserawaitfetchUser();constpostsawaitfetchPosts();returnDashboard user{user}posts{posts}/;}✅ 正确asyncfunctionPage(){const[user,posts]awaitPromise.all([fetchUser(),fetchPosts()]);returnDashboard user{user}posts{posts}/;}当处理多个数据源时这个简单的改变可以将页面加载时间减少数百毫秒。2. 避免桶文件导入从桶文件导入会强制打包程序解析整个库即使你只需要其中一个组件。这就像把整个衣柜都搬走只为了穿一件衣服。❌ 错误import{Check,X,Menu}fromlucide-react;✅ 正确importCheckfromlucide-react/dist/esm/icons/check;importXfromlucide-react/dist/esm/icons/x;importMenufromlucide-react/dist/esm/icons/menu;更好的方式使用 Next.js 配置// next.config.jsmodule.exports{experimental:{optimizePackageImports:[lucide-react,mui/material],},};// 然后保持简洁的导入方式import{Check,X,Menu}fromlucide-react;直接导入可将启动速度提高 15-70%构建难度降低 28%冷启动速度提高 40%HMR 速度显著提高。3. 使用延迟状态初始化当初始化状态需要进行耗时的计算时将初始化程序包装在一个函数中确保它只运行一次。❌ 错误functionComponent(){const[config,setConfig]useState(JSON.parse(localStorage.getItem(config)));returndiv{config.theme}/div;}✅ 正确functionComponent(){const[config,setConfig]useState(()JSON.parse(localStorage.getItem(config)));returndiv{config.theme}/div;}组件每次渲染都会从 localStorage 解析 JSON 配置但其实它只需要在初始化的时候读取一次将其封装在回调函数中可以消除这种浪费。4. 最小化 RSC 边界的数据传递React服务端/客户端边界会将所有对象属性序列化为字符串并嵌入到 HTML 响应中这会直接影响页面大小和加载时间。❌ 错误asyncfunctionPage(){constuserawaitfetchUser();// 50 fieldsreturnProfile user{user}/;}(use client);functionProfile({user}){returndiv{user.name}/div;// uses 1 field}✅ 正确asyncfunctionPage(){constuserawaitfetchUser();returnProfile name{user.name}/;}(use client);functionProfile({name}){returndiv{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!framestypeofwindow!undefined){import(./animation-frames.js).then((mod)setFrames(mod.frames)).catch(()setEnabled(false));}},[enabled,frames,setEnabled]);if(!frames)returnSkeleton/;returnCanvas frames{frames}/;}typeof window可以防止将此模块打包用于SSR优化服务端包体积和构建速度。6. 延迟加载第三方脚本分析和跟踪脚本不要阻塞用户交互。❌ 错误exportdefaultfunctionRootLayout({children}){useEffect((){initAnalytics();},[]);return(htmlbody{children}/body/html);}✅ 正确import{Analytics}fromvercel/analytics/react;exportdefaultfunctionRootLayout({children}){return(htmlbody{children}Analytics//body/html);}在水合后加载分析脚本优先处理交互内容。7. 使用 React.cache() 进行请求去重防止服务端在同一渲染周期内重复请求。❌ 错误asyncfunctionSidebar(){constuserawaitfetchUser();returndiv{user.name}/div;}asyncfunctionHeader(){constuserawaitfetchUser();// 重复请求returnnav{user.email}/nav;}✅ 正确import{cache}fromreact;constgetUsercache(async(){returnawaitfetchUser();});asyncfunctionSidebar(){constuserawaitgetUser();returndiv{user.name}/div;}asyncfunctionHeader(){constuserawaitgetUser();// 已缓存无重复请求returnnav{user.email}/nav;}8. 实现跨请求数据的 LRU 缓存React.cache() 仅在单个请求内有效因此对于跨连续请求共享的数据使用 LRU 缓存。❌ 错误import{LRUCache}fromlru-cache;constcachenewLRUCache({max:1000,ttl:5*60*1000,// 5 分钟});exportasyncfunctiongetUser(id){constcachedcache.get(id);if(cached)returncached;constuserawaitdb.user.findUnique({where:{id}});cache.set(id,user);returnuser;}这在 Vercel 的 Fluid Compute 中特别有效多个并发请求共享同一个函数实例。9. 通过组件组合实现并行化React 服务端组件在树状结构中按顺序执行因此需要使用组合对组件树进行重构以实现并行化数据获取❌ 错误asyncfunctionPage(){constdataawaitfetchPageData();return(Header/Sidebar data{data}//);}✅ 正确asyncfunctionPage(){return(Header/Sidebar//);}asyncfunctionSidebar(){constdataawaitfetchPageData();returndiv{data.content}/div;}这样一来页眉和侧边栏就可以并行获取数据了。10. 使用 SWR 进行客户端请求去重当客户端上的多个组件请求相同的数据时SWR 会自动对请求进行去重。❌ 错误functionUserProfile(){const[user,setUser]useState(null);useEffect((){fetch(/api/user).then((r)r.json()).then(setUser);},[]);returndiv{user?.name}/div;}functionUserAvatar(){const[user,setUser]useState(null);useEffect((){fetch(/api/user).then((r)r.json()).then(setUser);},[]);returnimg src{user?.avatar}/;}✅ 正确importuseSWRfromswr;constfetcher(url)fetch(url).then((r)r.json());functionUserProfile(){const{data:user}useSWR(/api/user,fetcher);returndiv{user?.name}/div;}functionUserAvatar(){const{data:user}useSWR(/api/user,fetcher);returnimg src{user?.avatar}/;}SWR 只发出一个请求并将结果在两个组件之间共享。11. 总结这些最佳实践的美妙之处在于它们不是复杂的架构变更。大多数都是简单的代码修改却能产生显著的性能改进。一个 600ms 的瀑布等待时间会影响每一位用户直到被修复。一个桶文件导入造成的包膨胀会减慢每一次构建和每一次页面加载。所以越早采用这些实践就能避免积累越来越多的性能债务。现在开始应用这些技巧让你的 React 应用快如闪电吧我是冴羽10 年笔耕不辍专注前端领域更新了 10 系列、300 篇原创技术文章翻译过 Svelte、Solid.js、TypeScript 文档著有小册《Next.js 开发指南》、《Svelte 开发指南》、《Astro 实战指南》。欢迎围观我的“网页版朋友圈”关注我的公众号冴羽或搜索 yayujs每天分享前端知识、AI 干货。