详解webpack + react + react-router 如何实现懒加载


Posted in Javascript onNovember 20, 2017

在 Webpack 1 中主要是由bundle-loader进行懒加载,而 Webpack 2 中引入了类似于 SystemJS 的System.import语法,首先我们对于System.import的执行流程进行简单阐述:

  1. Webpack 会在编译过程中扫描代码库时将发现的System.import调用引入的文件及其相关依赖进行单独打包,注意,Webpack 会保证这些独立模块及其依赖不会与主应用的包体相冲突。
  2. 当我们访问到这些独立打包的组件模块时,Webpack 会发起 JSONP 请求来抓取相关的包体。
  3. System.import 同样也是 Promise,在请求完成之后System.import会将抓取到的模块作为参数传入then中的回调函数。
  4. 如果我们重复访问已经加载完毕的模块,Webpack 不会重复执行抓取与解析的过程。

而 React Router 路由的懒加载实际上分为动态路由与与懒加载两步,典型的所谓动态路由配置如下:

/**
 * <Route path="/" component={Core}>
 *  <IndexRoute component={Home}/>
 *  <Route path="about" component={About}/>
 *  <Route path="users" component={Users}>
 *  <Route path="*" component={Home}/>
 * </Route>
 */
export default {
 path: '/', 
 component: Core,
 indexRoute: { 
  getComponent(location, cb) {
    ...
  },
 },
 childRoutes: [
  {
   path: 'about', 
   getComponent(location, cb) {
    ...
   },
  },
  {
   path: 'users', 
   getComponent(location, cb) {
    ...
   },
  },
  {
   path: '*', 
   getComponent(location, cb) {
    ...
   },
  },
 ],
};

正常打包

import IndexPage from './views/app.jsx'
import AboutPage from './views/about.jsx'
export default function({history}) {
  return (
    <Router history={history}>
      <Route path="/" component={IndexPage} />
      <Route path="/about" component={AboutPage} />
    </Router>
  )
}

这是一个正常打包的路由写法, 如果需要分割代码, 我们需要改造下路由, 借助getComponent和require.ensure

webpack 代码分割

export default function({history}) {
  return (
    <Router history={history}>
      <Route path="/" getComponent={(location, callback) => {
        require.ensure([], function(require) {
          callback(null, require('./HomePage.jsx'))
        })
      }} />
      <Route path="/about" getComponent={(location, callback) => {
        require.ensure([], function(require) {
          callback(null, require('./AboutPage.jsx'))
        })
      }} />
    </Router>
  )
}

这样看来代码有点累, 我们稍微改造下

const home = (location, callback) => {
 require.ensure([], require => {
  callback(null, require('./HomePage.jsx'))
 }, 'home')
}

const about = (location, callback) => {
 require.ensure([], require => {
  callback(null, require('./AboutPage.jsx'))
 }, 'about')
}
export default function({history}) {
  return (
    <Router history={history}>
      <Route path="/" getComponent={home}></Route>
      <Route path="/about" getComponent={about}></Route>
    </Router>
  )
}

这样看起来是不是简洁了很多

注意: 由于webpack的原因, 如果直接require('./AboutPage.jsx')不能正常加载, 请尝试require('./AboutPage.jsx').default

webpack2 代码分割

上面的代码看起来好像都是webpack1的写法, 那么webpack2呢?

webpac2就需要借助System.import了

export default function({history}) {
  return (
    <Router history={history}>
      <Route path="/" getComponent={(location, callback) => {
        System.import('./HomePage.jsx').then(component => {
          callback(null, component.default || component)
        })
      }} />
      <Route path="/about" getComponent={(location, callback) => {
        System.import('./AboutPage.jsx').then(component => {
          callback(null, component.default || component)
        })
      }} />
    </Router>
  )
}

我们一样可以把上面的代码优化一下

const home = (location, callback) => {
  System.import('./HomePage.jsx').then(component => {
    callback(null, component.default || component)
  })
}
const about = (location, callback) => {
  System.import('./AboutPage.jsx').then(component => {
    callback(null, component.default || component)
  })
}

export default ({ history }) => {
  return (
    <Router history={history}>
      <Route name="home" path="/" getComponent={home} />
      <Route name="about" path="/about" getComponent={about} />
    </Router>
  )
}

webpack2 + dva 实现路由和 models 懒加载

const routerThen = (app, callback, [component, model]) => {
  app.model(model.default || model)
  callback(null, component.default || component)
}

export default ({ history, app }) => {
  return (
    <Router history={history}>
      <Route name="home" path="/" getComponent={(location, callback) => {
        Promise.all([
          System.import('./views/app.jsx'),
          System.import('./models/topics')
        ]).then(routerThen.bind(null, app, callback))
      }} />
      <Route name="article" path="/article/:id" getComponent={(location, callback) => {
        Promise.all([
          System.import('./views/article.jsx'),
          System.import('./models/topic')
        ]).then(routerThen.bind(null, app, callback))
      }} />
    </Router>
  )
}

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

Javascript 相关文章推荐
JS宝典学习笔记(下)
Jan 10 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
JS实现基于拖拽改变物体大小的方法
Jan 23 Javascript
vue中v-model的应用及使用详解
Jun 27 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 Javascript
js实现列表向上无限滚动
Jan 13 Javascript
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
详细分析jsonp的原理和实现方式
Nov 20 #Javascript
three.js中文文档学习之通过模块导入
Nov 20 #Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
Nov 20 #Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 #Javascript
three.js中文文档学习之创建场景
Nov 20 #Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 #Javascript
VueJs 搭建Axios接口请求工具
Nov 20 #Javascript
You might like
与数据库连接
2006/10/09 PHP
discuz的php防止sql注入函数
2011/01/17 PHP
php中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
javascript 获取图片颜色
2009/04/05 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
防止文件缓存的js代码
2013/01/10 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
如何选择适合你的JavaScript框架
2017/11/20 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
element-ui多文件上传的实现示例
2019/04/10 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
Python编码时应该注意的几个情况
2013/03/04 Python
python模拟事件触发机制详解
2018/01/19 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
美国眼镜网:GlassesUSA
2017/09/07 全球购物
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
介绍一下write命令
2012/09/24 面试题
农村党员一句话承诺
2014/05/30 职场文书
2014年党委工作总结
2014/11/22 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
工程款催款函
2015/06/24 职场文书
python实现简单的三子棋游戏
2022/04/28 Python