react-router 按需加载
注:本文使用的 react-router 版本为 2.8.1
React Router 是一个非常出色的路由解决方案,同时也非常容易上手。但是当网站规模越来越大的时候,首先出现的问题是 Javascript 文件变得巨大,这导致首页渲染的时间让人难以忍受。实际上程序应当只加载当前渲染页所需的 JavaScript,也就是大家说的“代码分拆" — 将所有的代码分拆成多个小包,在用户浏览过程中按需加载。
官方示例在 这里。
所得到的效果是:
以前是这样(23333,我真不是故意的。。)
现在是这样:
实际上就是将一个大 javascript 文件拆分成了若干个 chunk file。
下面是改造过程
Webpack 配置
首先在 webpack.config.js
的 output
内加上 chunkFilename
output: {path: path.join(__dirname, '/../dist/assets'),filename: 'app.js',publicPath: defaultSettings.publicPath,// 添加 chunkFilenamechunkFilename: '[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((<Routerhistory={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) => {// 在后面加 .defaultcb(null, require('components/layer/ReportPage')).default}, 'ReportPage')
}
如果你是使用 CommonJS 的写法,也就是通过 module.exports
导出的,那就无须加 .default
了。
react-router 按需加载相关推荐
- React Native按需加载 手Q狼人杀探索之路
本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/mUzq4NaBHeF3T-NStLzuRw 作者:pe ...
- React Native 按需加载 手Q狼人杀探索之路
导语:最近特别火的狼人杀和最近特别火的React Native会擦出什么样的火花呢?本文和您一同探讨RN性能优化的现实场景. 项目简介: 狼人杀游戏是多人实时性游戏,对流畅度等性能都有要求.作为大型游 ...
- vue router按需加载
1 import Vue from 'vue' 2 import Router from 'vue-router' 3 4 Vue.use(Router); 5 //按需加载,当渲染其他页面时才加载其 ...
- react路由按需加载方法
使用router4之后以前的按需加载方法require.ensure 是不好使了. 所以我们改用react-loadable插件做按需加载. 第一步: yarn add react-loadable ...
- react按需加载(getComponent优美写法),并指定输出模块名称解决缓存(getComponent与chunkFilename)...
react配合webpack进行按需加载的方法很简单,Route的component改为getComponent,组件用require.ensure的方式获取,并在webpack中配置chunkFil ...
- react 动态路 嵌套动子路由_react 路由动态加载组件,实现按需加载
默认情况下,当在项目根路径下执行npm run build时,create-react- app内部使用webpack将src/路径下的所有代码打包成一个JS文件和一个 CSS文件. 当项目代码量不多 ...
- React单页如何规划路由、设计Store、划分模块、按需加载
本项目地址:react-coat-helloworld react-coat 同时支持浏览器渲染(SPA)和服务器渲染(SSR),本 Demo 仅演示浏览器渲染,请先了解一下:react-coat 第 ...
- 快速搭建react项目骨架(按需加载、redux、axios、项目级目录等等)
一.前言 最近整理了一下项目骨架,顺便自定义了一个脚手架,方便日后使用.我会从头开始,步骤一步步写明白,如果还有不清楚的可以评论区留言.先大致介绍一下这个骨架,我们采用 create-react-ap ...
- react项目如何按需加载antdDesign组件
react项目如何按需加载antdDesign组件分为两种情况: 第一种手写的,不使用脚手架: 1.安装: npm install ant --save 2.引用: import { Alert, F ...
- react 中使用import()实现按需加载报错 解决方法 --‘import’ and ‘export’ may only appear at the top level
react 中使用import()实现按需加载报错 解决方法 --'import' and 'export' may only appear at the top level 参考文章: (1)rea ...
最新文章
- 2019年《计算机应用基础》,2019年自考《计算机应用基础》模拟练习及答案一
- Photoshop创造氛围照片合成视频教程含素材
- 《Jersey用户指南》翻译邀请
- bindresult必须在哪个位置_手机视频剪辑工具哪个好?清爽视频编辑APP有人推荐吗?...
- HDU1253 胜利大逃亡
- linux 游戏 黑白,黑白迭代官方版游戏-黑白迭代下载v0.5-Linux公社
- GeoServer注意点
- OBJ文件格式分析工具: objdump, nm,ar
- win10系统解决Svn图标不显示的问题
- 必看! 为什么“吉祥物”可以提高UI设计以及品牌影响力
- (SELECT SUBSTRING(AreaCode FROM 0 FOR 5)FROM sysarea) = '810103'
- 因执迷而绽放,终登聆听贡献者荣誉榜
- 2021年最新友价商城源码 优化实名认证模块 19套PC模板2套手机模板 服务市场 任务大厅
- DB2-------
- 你真的了解单点登录(SSO)吗? 单点登录实现方式
- nalu模式多slice_H.264中NAL、Slice与frame意思及相互关系
- 联想昭阳E47A无线网卡指示灯不亮,搜不到无线信号,解决办法
- oracle报错1455,oracle_1455_错误解决办法
- RNN LSTM GRU 代码实战 ---- 简单的文本生成任务
- LoG算子与DoG算子相似性数学推导