课程简介

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

那些年写过的路由

路由是什么？

• 一种桥梁，根据需求找到供给方、交换

历史演进

静态网站=> 动态网站=> 前后端分离 => 单页应用 => 现代网页（ssr\ssg\微前端）

静态网页的问题：

• 更新不便利
• 管理成本高

动态网站：

• 可动态变更
• 数据库代码变更，可动态修改 asp jsp php
• 那个年代的门户网站：souhu等

问题 ：前端改动需要服务端再部署，导致服务不可用。用户体量，维护。

前后端分离：

AJAX，xml,http,异步拿到结果

网站稳定性提高

单页应用：

社区活跃，Webpack,Framework,代码复用、打包

网站及时响应，减少白屏

模块化

Sever端路由 => Sever + 前端路由

React-router

API

Package	Description
React-router	core of router
react-router-dom	DOM bindings for react router
react-router-native	react native bindings
react-router-config	static route config helpers

Paser URL => Router Match => Render

history 响应监听url拜年话，把解析结果灌注给router

History：会话管理

memoryHistory BrowserHistory HashHistory

感知URL 操作 URL

push/replace/go/back

ROUTER MATCH

路由实践

白屏时间超长|静态资源多

旁支页面升级，主页崩溃|一个SPA承载200+页面

数据内容空白时间长| 海量数据接口请求

• 数据瘦身 交付粒度切割

  • 去除无用依赖

  • 页面划分/功能模块划分

    如何切分，切分后是否还能复用：

    工程问题和运行时问题。

    打多个出口包

    微前端，切割巨石

    举例：

    首页 ： HomePage/ErrorReport，大页面如何处理

    Lazy + suspense

    异步懒加载，进一步优化加载速度

• 解决数据加载和处理耗时

  接口数据？

  声明式路由

  文件系统约定式路由

  CDN

  BFF RPC接口 数据提前聚合

  react 路由与拆包

  <要注意用户体验呵呵>.

  完