资讯专栏INFORMATION COLUMN

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

lk20150415 / 3010人阅读

摘要:单页用路由实现导航。简单介绍有如下特点它压缩后只有的大小。包括组件,路由的嵌套,动态路由,默认路由支持在的属性中设置。通过函数可添加路由过渡动画的逻辑等。优化后可减小,后可减少的大小。

官方的 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 的大小。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/80350.html

相关文章

  • 轻量移动React组件库

    摘要:移动端组件库重新设计了那块组件,让数据校验变得更简单。敬请期待依赖安装下载依赖初始解决不同机型的多倍屏问题,通过设置视网膜显示屏来达到统一的目的。方式二手动引入需要的组件加载加载 移动端React组件库 重新设计了Form那块组件,让数据校验变得更简单。欢迎提出更多优化建议,如有兴趣参与该项目,请邮件至:saytxk@gmail.com (-> . ->) 没错,我就是来骗 Star ...

    AaronYuan 评论0 收藏0
  • UI大全:前UI框架集合(持续更新,当前32个)

    摘要:简洁直观强悍的前端开发框架,让开发更迅速简单。是一套基于的前端框架。首个版本发布于年金秋,她区别于那些基于底层的框架,却并非逆道而行,而是信奉返璞归真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

    only_do 评论0 收藏0
  • UI大全:前UI框架集合(持续更新,当前32个)

    摘要:简洁直观强悍的前端开发框架,让开发更迅速简单。是一套基于的前端框架。首个版本发布于年金秋,她区别于那些基于底层的框架,却并非逆道而行,而是信奉返璞归真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

    church 评论0 收藏0
  • react-mobile-datepicker」一个移动react日期选择器组件

    摘要:一个轻量级的移动端日期选择器,不依赖于只有不到大小。可以通过上下滑动来设置年月日。在模拟的移动端可上下滑动触发事件。使用例子组件属性名称类型默认描述是否弹出日期选择框的主题包括根据指定的年,月,日格式显示日期。 react-mobile-datepicker 一个轻量级的react移动端日期选择器,不依赖于moment.js, 只有不到4k大小。 react-mobile-datepi...

    娣辩孩 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<