详解react-router如何实现按需加载


Posted in Javascript onJune 15, 2017

注:本文使用的 react-router 版本为 2.8.1

React Router 是一个非常出色的路由解决方案,同时也非常容易上手。但是当网站规模越来越大的时候,首先出现的问题是 Javascript 文件变得巨大,这导致首页渲染的时间让人难以忍受。实际上程序应当只加载当前渲染页所需的 JavaScript,也就是大家说的“代码分拆" — 将所有的代码分拆成多个小包,在用户浏览过程中按需加载。

所得到的效果是:

以前是这样(23333,我真不是故意的。。)

详解react-router如何实现按需加载

现在是这样:

详解react-router如何实现按需加载

实际上就是将一个大 javascript 文件拆分成了若干个 chunk file。

下面是改造过程

Webpack 配置

首先在 webpack.config.js output 内加上 chunkFilename

output: {
  path: path.join(__dirname, '/../dist/assets'),
  filename: 'app.js',
  publicPath: defaultSettings.publicPath,
  // 添加 chunkFilename
  chunkFilename: '[name].[chunkhash:5].chunk.js',
},

name 是在代码里为创建的 chunk 指定的名字,如果代码中没指定则 webpack 默认分配 id 作为 name。

chunkhash 是文件的 hash 码,这里只使用前五位。

添加首页

以前你的路由大概应该是这样的:(作为需要按需加载的大型应用,路由肯定是相当复杂,这里只列举部分路由举例)

ReactDOM.render(
 (
  <Router history={browserHistory}>
   {/* 主页 */}
   <Route path="/" component={App}>
    {/* 默认 */}
    <IndexRoute component={HomePage} />

    {/* baidu */}
    <Route path="/baidu" component={BaiduPage}>
     <Route path="result" component={BaiduResultPage} />
     <Route path="frequency" component={BaiduFrequencyPage} />
    </Route>

    {/* 404 */}
    <Route path='/404' component={NotFoundPage} />
    
    {/* 其他重定向到 404 */}
    <Redirect from='*' to='/404' />
   </Route>
  </Router>
 ), document.getElementById('app')
);

按需加载之后,我们需要让路由动态加载组件,需要将 component 换成 getComponent。首先将路由拆出来(因为路由庞大之后全部写在一起会很难看),创建一个根路由 rootRoute:

const rootRoute = {
 path: '/',
 indexRoute: {
  getComponent(nextState, cb) {
   require.ensure([], (require) => {
    cb(null, require('components/layer/HomePage'))
   }, 'HomePage')
  },
 },
 getComponent(nextState, cb) {
  require.ensure([], (require) => {
   cb(null, require('components/Main'))
  }, 'Main')
 },
 childRoutes: [
  require('./routes/baidu'),
  require('./routes/404'),
  require('./routes/redirect')
 ]
}

ReactDOM.render(
 (
  <Router
   history={browserHistory}
   routes={rootRoute}
   />
 ), document.getElementById('app')
);

history 不变,在 Router 中添加 routes 属性,将创建的路由传递进去。

这里有四个属性:

path

将匹配的路由,也就是以前的 path。

getComponent

对应于以前的 component 属性,但是这个方法是异步的,也就是当路由匹配时,才会调用这个方法。

这里面有个 require.ensure 方法

require.ensure(dependencies, callback, chunkName)

这是 webpack 提供的方法,这也是按需加载的核心方法。第一个参数是依赖,第二个是回调函数,第三个就是上面提到的 chunkName,用来指定这个 chunk file 的 name。

如果需要返回多个子组件,则使用 getComponents 方法,将多个组件作为一个对象的属性通过 cb 返回出去即可。这个在官方示例也有,但是我们这里并不需要,而且根组件是不能返回多个子组件的,所以使用 getComponent。

indexRoute

用来设置主页,对应于以前的 <IndexRoute>。

注意这里的 indexRoute 写法, 这是个对象,在对象里面使用 getComponent。

childRoutes

这里面放置的就是子路由的配置,对应于以前的子路由们。我们将以前的 /baidu、/404 和 * 都拆了出来,接下来将分别为他们创建路由配置。

路由控制

上面的childRoutes 里面,我们 require 了三个子路由,在目录下创建 routes 目录,将这三个路由放置进去。

routes/
├── 404
│  └── index.js
├── baidu
│  ├── index.js
│  └── routes
│    ├── frequency
│    │  └── index.js
│    └── result
│      └── index.js
└── redirect
  └── index.js

和 rootRoute 类似,里面的每个 index.js 都是一个路由对象:

/404/index.js

module.exports = {
 path: '404',

 getComponent(nextState, cb) {
  require.ensure([], (require) => {
   cb(null, require('components/layer/NotFoundPage'))
  }, 'NotFoundPage')
 }
}

/baidu/index.js

module.exports = {
 path: 'baidu',

 getChildRoutes(partialNextState, cb) {
  require.ensure([], (require) => {
   cb(null, [
    require('./routes/result'),
    require('./routes/frequency')
   ])
  })
 },

 getComponent(nextState, cb) {
  require.ensure([], (require) => {
   cb(null, require('components/layer/BaiduPage'))
  }, 'BaiduPage')
 }
}

/baidu/routes/frequency/index.js

module.exports = {
 path: 'frequency',

 getComponent(nextState, cb) {
  require.ensure([], (require) => {
   cb(null, require('components/layer/BaiduFrequencyPage'))
  }, 'BaiduFrequencyPage')
 }
}

举这几个例子应该就差不多了,其他都是一样的,稍微有点特别的是 redirect。

设置 Redirect

之前我们在根路由下是这么设置重定向的:

<Router history={browserHistory}>
   <Route path="/" component={App}>
    {/* home */}
    <IndexRoute component={HomePage} />

    <Route path="/baidu" component={BaiduPage}>
     <Route path="result" component={BaiduResultPage} />
     <Route path="frequency" component={BaiduFrequencyPage} />
    </Route>

    <Route path='/404' component={NotFoundPage} />
    {/* 如果都不匹配,重定向到 404 */}
    <Redirect from='*' to='/404' />
   </Route>
  </Router>

当改写之后,我们需要把这个重定向的路由单独拆出来,也就是 * 这个路由,我们上面已经为他创建了一个 redirect 目录。这里使用到 onEnter 方法,然后在这个方法里改变路由状态,调到另外的路由,实现 redirect :

/redirect/index.js

module.exports = {
 path: '*',
 onEnter: (_, replaceState) => replaceState(null, "/404")
}

The root route must render a single element

跟着官方示例和上面码出来之后,可能页面并没有渲染出来,而是报 The root route must render a single element 这个异常,这是因为 module.exports 和 ES6 里的 export default 有区别。

如果你是使用 es6 的写法,也就是你的组件都是通过 export default 导出的,那么在 getComponent 方法里面需要加入 .default。

getComponent(nextState, cb) {
  require.ensure([], (require) => {
   // 在后面加 .default
   cb(null, require('components/layer/ReportPage')).default
  }, 'ReportPage')
}

如果你是使用 CommonJS 的写法,也就是通过 module.exports 导出的,那就无须加 .default 了。

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

Javascript 相关文章推荐
JavaScript单元测试ABC
Apr 12 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
Bootstrap表格使用方法详解
Feb 17 Javascript
JavaScript简单实现合并两个Json对象的方法示例
Oct 16 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
React路由鉴权的实现方法
Sep 05 Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 Javascript
js实现轮播图特效
May 28 Javascript
javascript canvas实现雨滴效果
Jun 09 Javascript
jQuery实现 RadioButton做必选校验功能
Jun 15 #jQuery
bootstrap daterangepicker汉化以及扩展功能
Jun 15 #Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 #Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 #Javascript
详解react如何在组件中获取路由参数
Jun 15 #Javascript
react-router JS 控制路由跳转实例
Jun 15 #Javascript
Vue路由跳转问题记录详解
Jun 15 #Javascript
You might like
超级好用的一个php上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
为PHP5.4开启Zend OPCode缓存
2014/12/26 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
php curl发送请求实例方法
2019/08/01 PHP
javascript web页面刷新的方法收集
2009/07/02 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
2013/05/14 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
javascript的BOM
2016/05/03 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
记一次webapck4 配置文件无效的解决历程
2018/09/19 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
python使用htmllib分析网页内容的方法
2015/05/08 Python
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
python实现图片横向和纵向拼接
2020/03/05 Python
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
自主招生自荐信范文
2013/12/04 职场文书
《黄河颂》教学反思
2014/02/07 职场文书
开展党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
感恩教育观后感
2015/06/17 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python