react按需加载
来源:互联网 发布:食堂刷卡机数据采集 编辑:程序博客网 时间:2024/06/05 19:55
react-router webpack 按需加载,与路由权限控制
说明
当网站规模越来越大,通过webpack 打包后的 react 项目也会越来越大,这会导致首页渲染时间变长,影响用户体验,webpack 提供了一种按需加载的方式,需要结合 react-router 使用,他会将代码拆分成多个小包,需要哪个部分就加载响应的包。
webpack 配置
首先需要对 config 文件修改一下,如下
output: { path: path.join(__dirname, 'dev'), // 输出路径 filename: '/js/bundle.js', // 输出文件名 publicPath: path.join(__dirname, 'dev'), // 必填项 chunkFilename : '/js/routes/[name].chunk.js?[chunkhash:10]', // 按需加载输出的文件名 },
路由配置页(app/js/routes.js
)
react 按需加载,关键是让路由动态加载组件,react-router 提供了一个属性
getComponent
,它与component
属性一样,但是是异步的,当路由匹配时才会调用这个方法,常用于代码分割;
相关内容查看 API文档webpack 为我们提供了一个按需加载函数
require.ensure(dependencies, callback, chunkName)
,
- dependencies : 依赖的模块数组
- callback : 回调函数,该函数调用时会传入一个 require 参数
- chunkName : 模块名,用于构建时生成文件名
更多了解,查看官方文档
一般写法
/* app/js/routes.js 路由配置文件 */ import React from 'react'; import { Route, IndexRoute} from 'react-router'; // 引入容器组件 import App from './containers/App'; export default ( <Route path="/" component={App}> <IndexRoute getComponent={(location, cb) => { require.ensure([], require => { cb(null, require('./containers/Login.js').default) },'login'); }} /> <Route path="home" getComponent={(location, cb) => { require.ensure([], require => { cb(null, require('./containers/Home.js').default) },'home'); }} /> <Route path="login" getComponent={(location, cb) => { require.ensure([], require => { cb(null, require('./containers/Login.js').default) },'login'); }} /> </Route> );
注意:
cb(null, require('./containers/Login.js').default)
因为我用 es6 的export default
导出的组件,所以 require 之后要加上default
,如果使用module.export
导出组件 则不需要加 default
拆分写法
以上写法在 路由层级或者数量较多的时候会比较臃肿,所以还需要对路由进行拆分
路由拆分,需要对目录结构做一下改变,在js 文件夹下添加 routes 路由配置文件夹
|---js | |---actions | | | |---components | | | |---containers | | | |---reducers | | | |---store | | | |---routes | | |---login.js // 主路由的下一级路由 | | |---login // login 路由的下一级路由目录 | |---constants.js // 静态常量 | |---index.js // 项目入口文件 | |---routes.js // 路由配置主文件 |
routes.js 路由配置的主文件
const routes = { path : '/', // 将匹配的路由,对应标签中的 path 属性 indexRoute: { // 设置默认显示页面,对应标签中的 IndexRoute 组件 getComponent(nextState, cb) { require.ensure([], (require) => { cb(null, require('./containers/Login').default); }, 'Login'); } }, // childRoutes:[] // 子 route 的一个数组,与在 JSX route 配置中的 children 一样。 getChildRoutes(partialNextState, cb) { // 与 childRoutes 一样,但是是异步的,并且可以接收 partialNextState(location 信息) require.ensure([], (require) => { cb(null, [ require('./routes/login'), require('./routes/home'), require('./routes/error') ]) }) }, getComponent(nextState, cb) { // 定义对应的组件,对应标签中的 component 属性,但是是异步的,路由匹配时才会调用这个方法 require.ensure([], (require) => { // require.ensure : webpack 提供的按需加载方法 cb(null, require('./containers/App').default); }, 'App'); } } export default routes;
js/routes/home.js 路由分支
module.exports = { path: 'home', getChildRoutes(partialNextState, cb) { require.ensure([], (require) => { cb(null, [ require('./home/page'), require('./home/student'), require('./home/admin') ]) }) }, getComponent(nextState, cb) { require.ensure([], (require) => { cb(null, require('../containers/Home').default) }, 'Home') } }
路由权限控制
基本思路 : 每当指定路由要发生改变,就使用一个中间服务,介于上一级路由和将要到达路由之间启动,来判断我们是否有进入这个路由的权限,React 中的
<Route />
提供了一个onEnter
方法,表示正要进入这个路由,在这里判断进入权限,可以修改要进入的页面
<Route path="home" getComponent={(location, cb) => { require.ensure([], require => { cb(null, require('./containers/Home.js').default) },'home'); }} onEnter={request}/>function request(nextState, replace, next){ let auth = nextState.location.query.auth; if(auth === 'home'){ next(); } else if (auth === 'other') { replace('/other'); next(); } else { replace('/'); next(); }}
注:nextState : 表示跳转后的location 信息;replace 用于 更改下一个进入的页面地址,但是不会跳转;next : 用于跳转页面,没有其他操作则显示当前路由对应页面
如果使用路由拆分,如下
module.exports = { path: 'home', getChildRoutes(partialNextState, cb) { require.ensure([], (require) => { cb(null, [ require('./home/page'), require('./home/student'), require('./home/admin') ]) }) }, getComponent(nextState, cb) { require.ensure([], (require) => { cb(null, require('../containers/Home').default) }, 'Home') }, onEnter: (nextState, replace, next) => { console.log(nextState.location.state); let isAuth = nextState.location.state.isAuth; if (isAuth === 'student' || isAuth === 'teacher' || isAuth === 'admin') { next(); } else { replace('/error'); next(); } } }
- react按需加载
- react按需加载
- react-router 按需加载
- react webpack 按需加载初试
- react-router4 实现按需加载
- react-router实现按需加载
- Webpack + react-router 按需加载
- webpack+react-router按需加载入门
- react-router v4 按需加载
- React学习笔记_按需加载
- react配置antd的按需加载。
- React router+ webpack实现:按需加载
- React-router中,结合webpack实现按需加载
- create-react-app按需加载以及部署
- react中路由和按需加载问题
- react结合redux和react-router开发大型应用实现按需加载(code splitting)
- react-router4 实现按需加载并利用withRouter传递props
- React开发中使用require.ensure()按需加载ES6组件
- C++字符串流
- eclipse中写python文件找不到
- HDU1409-Is It a Number
- Spring整合myBatis时无法读取placeholder的问题解决
- Android JNI基础
- react按需加载
- 手游资源热更新策略探讨
- JAVA之伸展树
- 通过Spring Boot三分钟创建Spring Web项目
- 数据结构初探(一)「基础知识」
- html之列表标签
- 数据结构和算法总结
- lambda
- 每天一题LeetCode[第五天]