从 React 和 Vue 框架中吸取的关于页面速度的经验教训

在不断追求页面速度的过程中，我们经常会发现自己回到了同一个点。尽管产品、营销和增长团队努力激励技术团队，但可以提高网站性能的任务经常因为需要重构而被推迟，即使完成了，也并不总是能产生完整的结果。在这个循环中，考虑一些关于实现真正性能的深刻观点是有益的。例如，与其他平台相比，我们可以从 React.js 和 Vue.js 或它们的 SSR（服务器端渲染）扩展（如 Next.js 和 Nuxt.js）的速度中学到什么教训？现在是不是该优化 jQuery 和 CSS 文件的 MB 了？那些为了不了解情况的前端开发人员而牺牲 Web 性能的大公司什么时候才能醒悟？让我们一一回答这些问题。

为什么基于 Next.js 和 Nuxt.js 的网站速度很快？

Next 和 Nuxt 平台是基于 React 和 Vue 构建的 SEO 友好型结构，速度表现突出。但这些平台为什么这么快呢？

React.js 和 Vue.js 是基于组件的框架，将每个页面分解为子组件，如下所示。

image（2）.png — 来源: https://dev.to/yakimych/seriously-do-react-hooks-replace-state-containers-3cpl

让我们举一个真实的例子来说明这一点：一个电子商务列表页面。这个列表页面可以被认为具有以下子组件：

标题
上市
- 列出条目信息
  - 页面标题
  - 面包屑
  - 产品数量
- 筛选
  - 类别过滤器
  - 过滤器价格
  - ...
- 排序
- 产品卡片
  - 产品照片
- 产品详情
  - 产品名称
  - 产品价格
    - 删除线价格
    - 卖出价
  - 折扣率
  - 活动信息
- 分页
- 类别内容
页脚

使用 Nuxt.js 创建基于组件的应用程序时，每个组件都单独编码并包含在母版页中。例如，考虑一个名为 ProductPhoto.js 的文件。无论产品照片需要什么功能（轮播、响应式图像显示等），JS 代码都编写在此组件中。同样，只有此组件使用的 CSS 文件包含在其中。这意味着如果使用该组件，则仅执行每个组件所需的文件。

目前大多数网络平台是如何处理这一过程的？

script.js 文件包含从会员资格、过滤器和购物车页面到菜单的所有内容的代码，该代码在所有页面上运行。结果如何？

带有 3 MB JS 文件和 1.5 MB CSS 文件。主要问题不仅仅是文件大小，而且您不能指望普通 Android 移动设备的 CPU 在几毫秒内执行数千行代码。通过仅运行所需的代码，您可以实现性能提升。

如何消除阻塞渲染的资源？

如今，前 32 万个网站中有 1% 使用 Font Awesome 字体库，平均大小约为 250 KB。考虑到由于滑动效果，异步加载并不受欢迎，请考虑在移动设备或桌面上打开页面时，在页面的第一个屏幕上可以看到多少字体。对 50 个不同平台的简短研究发现，平均使用 3.4 个图标（最常见的是：购物车、用户、菜单、通知）。因此，为了加载四个图标而不会出现问题，我们加载了整个库。