Reacti路由与项目实践
路由是什么？
路由.(Router）是一种负责寻径的网络设备，它在互连网络中从多条路径中寻找通讯量最少的一条网络路径提供给用户通信。路由用于连接多个逻辑上分开的网络。对用户提供最佳的通信路径。
总的来说：路由是桥梁，帮助需求方找到供给方，并进行交换！！
那些我们写过路由的地方：动态网站、SSR/SsG8做前端、前后懂分离、静态网站、单页应用
React-router：
import React from "react";
import ReactDOM from "react-dom":9585
import { BrowserRouter as Router, Route } from "react-router-dom";ReactDOM.render(
<Route oath_"/o...”t9585
node
);
react-router-dom:切图仔我来打交道
react-router :React我来打交道
History:浏览器我来打交道
History接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录
BrowserRouter 基于History
访问Url形如www.abc.com/a/b/v
HashRouter 基于Hash
访问Url形如www.abc.com/#/a/b/v
路由项目实践:
打开任意页面，白屏时间超长
js bundle资源超大，静态资源超多
一个旁支页面的变更升级,导致主页直接崩溃
一个SPA应用承载200+页面，巨石应用，变更升级风险极大
页面加载后，数据内容空白时间超长
海量数据接口请求
应用开发，构建，交付粒度需要瘦身&切割
解决数据加载，前端数据处理的耗时
交互稿设计了多张页面，页面间做跳转
页面划分->模块功能划分
如何瘦身&切割 路由是如何切分的?
200+页面的SPA应用分拆成十个子SPA应用
首页加载速度从5min - > 10s
lmport+Lazy+Suspense
import()+ babel-plugin-syntax-dynamic-import,识别分割模块-Lazy进行异步加载
suspense包裹动态组件, cover异步加载前的UI 首页加载速度从10s -> 2s
