加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

「react-rainie-router」轻量的mobile移动端 react 路由,只有 2

发布时间:2020-12-15 08:29:13 所属栏目:百科 来源:网络整理
导读:官方的 react-router 打包后有 100 多 k,移动端上相当影响首屏速度,这里有一个功能相当的 react 路由,只要 2k !!! 分享给大家,欢迎 star,欢迎试用,优化性能!这里分享给大家: GitHub:https://github.com/lanjingling0510/react-rainie-router 开

官方的 react-router 打包后有 100 多 k,移动端上相当影响首屏速度,这里有一个功能相当的 react 路由,只要 2k !!!

分享给大家,欢迎 star,欢迎试用,优化性能!这里分享给大家:

GitHub:https://github.com/lanjingling0510/react-rainie-router

开发目的

最近在做公司的 CQASO 移动端项目,用的 react+redux 。 spa 单页用 react-router 路由实现导航。每个页面单独请求(coding-split)后,公共模块的 js 大小为 120k(gzip 压缩后),加上分离出来的单个页面的大小,导致首屏的渲染响应速度极低。为了提高首屏的响应速度,减小 bundle 的大小,我放弃了 100 多 k 的 react-router ,自己写了一套功能, api 一样的路由。

简单介绍

react-rainie-router 有如下特点:

它压缩后只有 2k 的大小。

  • 它包含了 react-router 的大部分功能。包括 Router,Route,Link 组件,路由的嵌套,动态路由,默认路由

  • 支持coding-spliting,在 Route 的 getComponent 属性中设置。

  • 可以不依赖 history ,使用 html5 的 history API 。

  • 通过 listenBofore 函数可添加路由过渡动画的逻辑等。

优化后可减小, gizp 后可减少 15k 的大小。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读