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扩展自写的 UI导航
Jan 13 Javascript
jQuery Flash/MP3/Video多媒体插件
Jan 18 Javascript
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
热点新闻滚动特效的js代码
Aug 17 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
May 12 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
layUI实现前端分页和后端分页
Jul 27 Javascript
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
Apr 26 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
php SQL防注入代码集合
2008/04/25 PHP
浅谈PHP强制类型转换,慎用!
2013/06/06 PHP
destoon复制新模块的方法
2014/06/21 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
JavaScript 异步调用
2017/10/25 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
python中mechanize库的简单使用示例
2014/01/10 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
Python hashlib模块加密过程解析
2019/11/05 Python
python 实现矩阵按对角线打印
2019/11/29 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
python如何获取apk的packagename和activity
2020/01/10 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
python实现mean-shift聚类算法
2020/06/10 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
速比涛英国官网:Speedo英国
2019/07/15 全球购物
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
银行主办会计岗位职责
2014/08/13 职场文书
项目转让协议书
2014/10/27 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
工厂仓管员岗位职责
2015/04/01 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
行政处罚决定书
2015/06/24 职场文书