性能 | 众里千寻

分割代码

我们将应用代码分割成多个部分，应用在运行的时候按需加载使用到的代码。这样可以减少用户打开页面时资源加载的时间。

通常情况下，我们都是按照页面路由来分割代码。

组件和状态优化

不要将所有状态都放到一个 Contextopen in new window 中，这样会导致不必要的重新渲染。我们应该将状态进行分割，然后放到多个状态中去。
保持状态与使用状态的组件越近越好。这样可以避免未使用状态的组件的重新渲染。
如果一个初始状态需要通过复杂的计算来过的，那么应用使用状态初始化函数。

// 每次组件重新渲染的时候都会计算
const [state, setState] = React.useState(myExpensiveFn());

// 只会计算一次
const [state, setState] = React.useState(() => myExpensiveFn());

1
2
3
4
5

如果状态会被很多组件使用，我们应该使用状态管理库，比如 recoilopen in new window 和 jotaiopen in new window
如果碰到组件渲染的性能问题，可以考虑将 Chakra UIopen in new window、emotionopen in new window、styled-componentsopen in new window 等运行时样式方案改成 tailwindopen in new window、linariaopen in new window、vanilla-extractopen in new window 或 CSS modulesopen in new window 等编译时样式方案。

图片优化

不在当前窗口可视范围内的图片都应该通过懒加载的方式加载。

同时，应该劲量使用更现代的图片格式（比如 WEBP）来让图片加载更快。

Web vitals

自从 Google 在收录网页的时候会考虑 Web vitals，我们应该留心我们的页面在 Lighthouseopen in new window 和 Pagespeed Insightsopen in new window 中 Web vitals 分数。

部署

将静态资源都部署到 CDN 上去。

常见的 CDN 有：

关注微信公众号，获取最新推送~

加微信，深入交流~

# 分割代码

# 组件和状态优化

# 图片优化

# Web vitals

# 部署

分割代码

组件和状态优化

图片优化

Web vitals

部署