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 相关文章推荐
checkbox使用示例
Aug 23 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
纯css+js写的一个简单的tab标签页带样式
Jan 28 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
JavaScript中const、var和let区别浅析
Oct 11 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
vue项目前端埋点的实现
Mar 06 Javascript
Node.js API详解之 os模块用法实例分析
May 06 Javascript
vue实现同时设置多个倒计时
May 20 Vue.js
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
我的论坛源代码(四)
2006/10/09 PHP
php 分页原理详解
2009/08/21 PHP
php面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
让PHP开发者事半功倍的十大技巧小结
2010/04/20 PHP
php注销代码(session注销)
2012/05/31 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
用JQUERY增删元素的代码
2012/02/14 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
浅谈js多维数组和hash数组定义和使用
2016/07/27 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
python中子类继承父类的__init__方法实例
2016/12/15 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
冰淇淋开店创业计划书
2014/02/01 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
元宵节主持词
2014/03/25 职场文书
高一学生期末评语
2014/04/25 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
音乐节策划方案
2014/06/09 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python
原生JS实现分页
2022/04/19 Javascript
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android