我恰好在实际生产项目中使用过这三种框架 。随着单页应用（SPA）概念的日趋火热 ， React框架在设计和实践中同样也围绕着SPA的概念来打造自己的技术栈体系 ， 其中路由模块便是非常重要的一个组成部分 。其实现在的前端工程师很多时候解决的不是样式问题 ， 而是协作和业务逻辑处理的问题 ， 很少见一家公司会同时使用多套框架来实现业务功能 ， 学习的有 ， 实际项目中一般都是一套代码撸一切 ， 方便快捷产出高 。
如何结合好React框架的技术栈特性来进行路由模块设计？
随着单页应用（SPA）概念的日趋火热 ， React框架在设计和实践中同样也围绕着SPA的概念来打造自己的技术栈体系 ， 其中路由模块便是非常重要的一个组成部分 。它承载着应用功能分区 ， 复杂模块组织 ， 数据传递 ， 应用状态维护等诸多功能 ， 如何结合好React框架的技术栈特性来进行路由模块设计就显得尤为重要 ， 本文则以探索React动态路由设计最佳实践作为切入点 ， 分享下在实际项目开发中的心得与体会 。
为什么需要做动态路由动态路由：对于大型应用来说 ， 一个首当其冲的问题就是所需加载的 JavaScript 的大小 。程序应当只加载当前渲染页所需的 JavaScript 。有些开发者将这种方式称之为 "代码分拆(code-splitting)" — 将所有的代码分拆成多个小包 ， 在用户浏览过程中按需加载 。1、首屏加载效率随着项目的业务需求持续添加 ， react中的代码复杂度将面临着持续上升的问题 ， 同时由于react中的jsx和es6语法的文件在实际生产环境中 ， 也会被babel-js重新编译成浏览器所支持的基于ES5的语法模块 ， 各个模块打体积将会变得非常的臃肿不堪 ， 直接影响到页面加载的等待时常 。
以下图为例 ， 如果不做处理 ， 我们的业务模块通常体积会达到兆级 ， 这对首屏加载速率和用户体验的影响无疑是巨大的 。2、降低模块间的功能影响react中的jsx无疑是一个很方便的设计 ， 能让开发者像写html一样来书写虚拟dom ， 但是它同样也贯彻执行着"all in js"的理念 ， 最终构建完成后所有的业务代码都将打包到1-2个bundle文件中 ， 这就等于将所有的功能模块都集中到了一个物理文件中 ， 如果遇到业务处理的复杂性 ， 接口层变更 ， 异常处理出错等诸多代码健壮性问题时 ， 一个子模块出现了错误 ， 就很有可能导致用户界面整体性出错从而无法使用的风险 。
3、符合二八定律通常在一个应用中 ， 最重要和高频访的功能模块只占其中一小部分 ， 约20% ， 其余80%尽管是多数 ， 却是次要的 。以后台系统为例 ， 普通业务人员通常使用的高频模块只有3-5个 ， 但是业务系统通常会有各式各样的权限设计 ， 不同的权限映射着能访问的路由模块也不尽相同 ， 虽然我们可以在用户的数据访问和路由地址上做拦截限制 ， 但是同样也需要对其能访问的模块资源进行限制 ， 才能做到真正的按需加载 ， 随取随用 。
4、工具体系支撑无论是react-router还是对应搭配的构建工具webpack ， 其中都有针对动态路由部分的设计与优化 ， 使用好了往往能起到事半功倍的效果 。简化版实现：bundle-loaderbundle-loader是webpack官方出品与维护的一个loader ， 主要用来处理异步模块的加载 ， 将简单的页面模块转成异步模块 ， 非常方便 。
推荐阅读
- 小学德育论文怎么写,德育论文框架怎么写
- PHP轻量级开源接口框架,rpc接口
- 漫谈分布式计算框架,分布式框架
- T2 能安装xposed框架吗？
- 电影雏菊讲述了什么故事？内容简介及主要故事情节概述
- 二手车衍生业务概述，学习汽车衍生服务知识的熟悉
- 自动化框架及工具,测试框架
- 更新！t2全部版本 root框架 自定义按键 教程送给折...
- 谷歌框架
- 概述大学生毕业论文答辩流程,毕业论文答辩是什么