React 路由与项目实践 | 青训营笔记

81 阅读1分钟

今天学习的是 React 路由与项目实践,以下是课程结构。

  • 了解路由的演进历史&原因
  • 了解 React-Router 的原理
  • 复杂前端里结合路由的最佳实践

那些年我们一起写过的路由

什么是路由:

路由(Router)是负责寻径的网络设备,它在互联网中从多条路径中寻找通讯量最少的一条网络路径提供给用户通信,路由用于连接多个逻辑上分开的网络,对用户提供最佳通信路径。

路由是桥梁,帮助需求方找到供给方,并进行交换。

前端的发展:

image.png

静态网站,动态网站,前后端分离,单页应用,SSR/SSG/微前端。

image.png

image.png

image.png

image.png

image.png

路由项目实践

存在问题

  • 打开任意页面,白屏时间超长
    • JS Bundle 资源超大,静态资源超多
  • 一个旁支页面的变更升级,导致主页直接崩溃
    • 一个 SPA 应用承载200+页面,巨石应用,变更升级风险极大
  • 页面加载之后,数据内容空白时间超长
    • 海量数据接口请求

解决方法

  • 应用开发,构建,交付粒度需要瘦身,切割
  • 解决数据加载,前端数据处理的耗时

先来看第一点:应用开发,构建,交付粒度需要瘦身,切割。

image.png

image.png

image.png

image.png

image.png

image.png

image.png