浅谈React Router动态路由
来源:互联网 发布:淘宝买万艾可打电话 编辑:程序博客网 时间:2024/06/07 12:27
1、webpack的codesplitting
webpack可以通过require.ensure接口实现按需加载。
require.ensure保证了模块的异步调用,当callback回调中调用了一个模块时,可以实现按需加载。
require.ensure([], function() { callback(null, require('…')); //...});
2、react-router实现按需加载
按需加载的作用:主要可以减少首页请求的文件的大小。
在react-router中,可以通过getChildRoutes、getIndexRoute、getComponents三个接口结合webpack的code splitting,通过切换路由实现按需加载。
react-router定义了getChildRoutes、getIndexRoute、getComponents这3个方法,这3个方法是异步的,且只在需要时调用,通过这3个方法定义的路由,称之为“渐进式路由匹配”——react-router在匹配到路由时,只是渐进式地加载该路由所需的组件,这样就能实现按需加载。
eg:
import { rootdir } from '../config';const getIndexRoute = ({ location }, callback) => { require.ensure([], () => { callback(null, { component: require('./Home'), }); }, 'public/home');};const getChildRoutes = ({ location }, callback) => { const sliced = location.pathname.slice(rootdir.length); if(sliced.indexOf('todos') !== -1) { require.ensure([], () => { callback(null, require('./todos.routes')); }, 'public/todos'); return; } callback(null, []);}注意:
1、require方法的参数不能使用变量,只能使用字符串,如require('./Home')。
2、如果在路由页面使用了require.ensure这种按需加载路由级组件的方式,则在其他地方(包括本页面)就不要再import了,否则不会打包生成chunk文件。也就是说,需要按需加载的路由级组件必须在路由页面进行加载,任何地方都不能通过import引入按需加载的组件。
阅读全文
1 0
- 浅谈React Router动态路由
- React-router路由实践
- React-router路由实践
- react-router路由
- React-router路由实践
- react-router 路由匹配
- react-router 路由
- 浅谈React Router入门
- (二)创建react-router路由
- 从 React Router 谈谈路由
- vue-router -- 动态路由匹配
- Vue-Router(二) 动态路由
- vue-router动态路由详解
- vue-router动态路由注意事项
- vue-router 动态添加 路由
- vue-router 之动态路由
- react-router Switch 组件不能动态更换子路由的问题
- 前端路由&react-router使用姿势
- 南阳OJ 组合数
- 徐东山:腾讯云安全的使命和技术实现
- git
- 在基于Android以及Jetson TK平台上如何写32位的Thumb-2指令
- ubuntu下安装jdk和tomcat
- 浅谈React Router动态路由
- Oracle正则表达式使用介绍
- Gradle构建-从Eclipse到Studio介绍篇
- 【Linux虚拟机】VMware启动CentOS虚拟机报错:开机时出,内部错误
- 浅谈智能指针auto_ptr/shared_ptr/unique_ptr
- KotLin的简单使用 KotLin入门基础 AndroidStudio中配置KotLin插件 新建KotLin工程
- 关于设置前台Service进程的误区
- 内存的数据组装
- Oracle中的正则表达式(及函数)详解