分割代码

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

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

这里是分割代码的样例open in new window

组件和状态优化

  • 不要将所有状态都放到一个 Contextopen in new window 中,这样会导致不必要的重新渲染。我们应该将状态进行分割,然后放到多个状态中去。
  • 保持状态与使用状态的组件越近越好。这样可以避免未使用状态的组件的重新渲染。
  • 如果一个初始状态需要通过复杂的计算来过的,那么应用使用状态初始化函数。
// 每次组件重新渲染的时候都会计算
const [state, setState] = React.useState(myExpensiveFn());

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

图片优化

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

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

Web vitals

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

部署

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

常见的 CDN 有:

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