React-router中结合webpack实现按需加载实例


Posted in Javascript onMay 25, 2017

简要介绍:在React-router中,暴露了3个接口,如果结合webpack的code splitting,就通过切换路由实现按需加载。

1.webpack的code splitting

webpack可以通过一些方法,来实现按需加载,暴露的接口为require.ensure

require.ensure(["module-a", "module-b"], function() {
 var a = require("module-a");
 // ...
});

这个require.ensure保证了模块的异步调用,当callback回调中调用了一个模块的时候,可以实现按需加载。

2.React-router实现按需加载的接口

React-router定义了 getChildRoutes, getIndexRoute, getComponents这样3个方法,这3个方法是异步的,并且只在需要的时候调用,通过这3个方法定义的路由,我们称之为“渐进式路由匹配”,React-router在匹配到路由时,只是渐进式的加载改路由所需要的组件,这样就能实现按需加载。

(1)webpack的配置:

output: {
    path: __dirname + '/dist/js/',
    publicPath:'/js/',
    filename: '[name].js',
    chunkFilename: '[name].[chunkhash:5].chunk.js'
  },

在这里我们加上了chunkFilename:…. 这句代码用于分割js,特别注意publicPath这个路径要与服务器的资源的路径对应,否则加载js的时候会出现404错误。

(2)通过getComponents等3个方法重新配置路由

export const routes={
 path:'/',
 getComponent(nextState,callback){
  require.ensure([],require=>{
   callback(null,require('../components/nav').default);
  },'nav');
 },
 indexRoute:{
  getComponent(nextState,callback){
   require.ensure([],require=>{
    callback(null,require('../components/examine').default);
   },'examine');
  }
 },
 childRoutes:[{
  path:'examine',
  getComponent(nextState,callback){
   require.ensure([],require=>{
    callback(null,require('../components/examine').default);
   },'examine');
   }
 },
 {
  path:'admin',
  getComponent(nextState,callback){
   require.ensure([],require=>{
    callback(null,require('../components/admin').default);
   },'admin');
  }
 },
 {
  path:'history',
  getComponent(nextState,callback){
   require.ensure([],require=>{
    callback(null,require('../components/history').default);
   },'history');
  }
 },
 {
  path:'feedback',
  getComponent(nextState,callback){
   require.ensure([],require=>{
    callback(null,require('../components/feedback').default);
   },'feedback')
  }
 }
]
};

这里我们将路由定义中的component替换成了 getComponent。

(3)最后效果:

首页时候,加载了examine.js和nav.js:

React-router中结合webpack实现按需加载实例

切换路由时,比如从首页切换到了商品管理,这样除了加载examine.js外,多加载了admin.js:

React-router中结合webpack实现按需加载实例

(4)总结:

我们看到react-router的按需加载,作用主要表现在可以减少首页请求的文件的大小。

3.注意事项:

1、require(‘components/Index').default中require方法的参数不能使用变量,只能使用字符串!

2、如果你的组件是使用es5的module.exports导出的话,那么只需要require(‘components/Index')即可。而如果你的组件是使用es6的export default导出的话,那么需要加上default!例如:require(‘components/Index').default

3、如果在路由页面使用了按需加载(require.ensure)加载路由级组件的方式,那么在其他地方(包括本页面)就不要再import了,否则不会打包生成chunk文件。简而言之,需要按需加载的路由级组件必须在路由页面进行加载。

特别是第3点,笔者就是因为这个原因导致按需加载失败,特别注意import不能在任何地方引入按需加载的组件。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 分页控件实现代码
Nov 30 Javascript
两个Javascript小tip资料
Nov 23 Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
Feb 13 Javascript
JavaScript检测原始值、引用值、属性
Jun 20 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
JS中Object对象的原型概念基础
Jan 29 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 Javascript
node.js操作mongodb简单示例分享
May 25 #Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 #Javascript
node.js操作mysql简单实例
May 25 #Javascript
基于vue实现swipe分页组件实例
May 25 #Javascript
Javascript 实现匿名递归的实例代码
May 25 #Javascript
Kotlin学习第一步 kotlin语法特性
May 25 #Javascript
jQuery Masonry瀑布流布局神器使用详解
May 25 #jQuery
You might like
javascript firefox不显示本地预览图片问题的解决方法
2008/11/12 Javascript
js计算页面刷新的次数
2009/07/20 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
python的dict,set,list,tuple应用详解
2014/07/24 Python
跟老齐学Python之集合的关系
2014/09/24 Python
python求列表交集的方法汇总
2014/11/10 Python
python3.x上post发送json数据
2018/03/04 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
Python中如何引入第三方模块
2020/05/27 Python
Python:__eq__和__str__函数的使用示例
2020/09/26 Python
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
全球性的女装店:storets
2019/06/12 全球购物
Currentbody德国站:健康与美容技术专家
2020/04/05 全球购物
腾讯广告词
2014/03/19 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
python实现自定义日志的具体方法
2021/05/28 Python
Golang生成Excel文档的方法步骤
2021/06/09 Golang
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang