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 相关文章推荐
jscript之List Excel Color Values
Jun 13 Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 Javascript
DOM事件探秘篇
Feb 15 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
Nest.js散列与加密实例详解
Feb 24 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捕获Fatal error错误的方法
2014/06/11 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
2013/01/17 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
考试没考好检讨书
2014/01/31 职场文书
红领巾广播站广播稿
2014/02/01 职场文书
保护地球的标语
2014/06/17 职场文书
我的中国梦演讲稿初中篇
2014/08/19 职场文书
优秀教研组申报材料
2014/12/26 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
MySQL 覆盖索引的优点
2021/05/19 MySQL
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis
HTML基本元素标签介绍
2022/02/28 HTML / CSS
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers