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 相关文章推荐
JavaScript网页制作特殊效果用随机数
May 22 Javascript
javascript 当前日期加(天、周、月、年)
Aug 09 Javascript
JQuery表格内容过滤的实现方法
Jul 05 Javascript
innerText 使用示例
Jan 23 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
Mar 13 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 Javascript
javascript自定义滚动条实现代码
Apr 20 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
VuePress 静态网站生成方法步骤
Feb 14 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制作验证码
2016/10/12 PHP
php事件驱动化设计详解
2016/11/10 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
JavaScript中的console.dir()函数介绍
2014/12/29 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
javascript基础知识
2016/06/07 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
python批量修改文件编码格式的方法
2018/05/31 Python
python爬取网易云音乐评论
2018/11/16 Python
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
Django实现文件上传下载
2019/10/06 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
大学生个人求职口试自我评价
2014/02/16 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
红头文件任命书范本
2014/06/05 职场文书
司机岗位职责范本
2015/04/10 职场文书
活着观后感
2015/06/03 职场文书
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript