本篇文章主要记录笔者项目中使用 react-route + webpack 做路由按需加载的心得,可能只有笔者一个人看,权当日记了。
 
很久很久以前,react-route还是2.X和3.X版本的时候,我们是这样做按需的:

const routes = {
path: '/',
component: AppCom,
indexRoute: {
component: Admin
},
childRoutes: [
{
path: 'edit/:id',
getComponent: (nextState, cb) => {
require.ensure([], (require) => {
cb(null, require('../entry/admin/edit.jsx'))
})
}
}
]
}
<Router routes={routes} history={hashHistory} />
由于笔者公司需要做按需加载的项目并不多,所以在很长一段时间里,笔者对于按需的印象都一直停留在这个阶段。
 
时间到了2018年3月,笔者总算是能用上按需了,这回我们直接上最新版的react-route,版本号4.1.1。
 
新版的react-route相比老版本,改动的程度很大,require.ensure虽然还能用,但是getComponent却已经被处理掉了,笔者根据官方文档摸索了很久,结果官方文档的案例没有一个能看的,直到笔者看到了这篇文章:https://www.jianshu.com/p/547aa7b92d8c
 
这里介绍的,就是这篇文章中提到的使用Bundle来做按需的方式。
 
我们需要引入Bundle.js作为一个加载器,其代码如下:
import React from 'react';

export default class Bundle extends React.Component {
constructor(props) {
super(props);
this.state = {
mod: null
};
} componentWillMount() {
this.load(this.props)
} componentWillReceiveProps(nextProps) {
if (nextProps.load !== this.props.load) {
this.load(nextProps)
}
} load(props) {
this.setState({
mod: null
});
props.load().then((mod) => {
this.setState({
mod: mod.default ? mod.default : mod
});
});
} render() {
return this.state.mod ? this.props.children(this.state.mod) : null;
}
}
配置路由页部分代码:
import Bundle from './Bundle';
const routeObj = {
url1:'url1/url1',
url2:'url2/url2',
url3:'url3/url3',
}
let components = {};
for(let route in routeObj){
components[route] = (props) => (
<Bundle load={() => import(`../entry/${routeObj[route]}`)}>
{(Component) => <Component {...props}/>}
</Bundle>
);
}
这里需要注意,import不支持直接使用变量作为参数,webpack官方解释如下:
 
 
也就是说,import后至少要有一部分是真实路径,所以才有了
import(`../entry/${routeObj[route]}`)}
路由声明代码:
<Route exact path="/" component={components.url1}/>
webpack配置:
output: {
path: paths.appBuild,
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js'
}
这样就完成了按需的配置,开发者工具中也能看到按需加载的代码块了。
 
在这里,我想吟诗一首:
 
啊~~
我编不下去了
 

react-route4 按需加载配置心得的更多相关文章

  1. react antd样式按需加载配置以及与css modules模块化的冲突问题

    通过create-react-app脚手架生成一个项目 然后运行npm run eject 把webpack的一些配置从react-scripts模块弹射出来, 方便自己手工增减,暴露出来的配置文件在 ...

  2. React Router 按需加载+服务器渲染的闪屏问题

    伴随着React协议的『妥协』(v16采用MIT),React为项目的主体,这个在短期内是不会改变的了,在平时使用过程中发现了如下这个问题: 在服务器渲染的时候,刷新页面会出现闪屏的现象(白屏一闪而过 ...

  3. antd按需加载,配置babel-plugin-import插件,编译后报错.bezierEasingMixin()解决方案

    报错如下: ./node_modules/antd/lib/button/style/index.less (./node_modules/css-loader??ref--6-oneOf-7-1!. ...

  4. react路由按需加载方法

    使用router4之后以前的按需加载方法require.ensure 是不好使了. 所以我们改用react-loadable插件做按需加载. 第一步: yarn add react-loadable ...

  5. mybatis 启用延迟加载和按需加载配置

    启用延迟加载和按需加载 Mybatis配置文件中通过两个属性lazyLoadingEnabled和aggressiveLazyLoading来控制延迟加载和按需加载. lazyLoadingEnabl ...

  6. Vuetify按需加载配置

    自己配置vuetify按需加载的步骤,在此记录: 执行npm install vuetify –save 或 yarn add vuetify添加vuetify添加依赖执行npm install -- ...

  7. react CRA antd 按需加载配置 lessloader

    webpack配置 webpack.config.dev.js, webpack.config.prod同理. 'use strict'; const autoprefixer = require(' ...

  8. 配置react / antd 按需加载 并且使用less(react v16)

    1.开启项目   并且执行 yarn eject 下载好我们需要的插件(babel-plugin-import   less  less-loader   antd  react-loadable   ...

  9. nuxt中iview按需加载配置

    在plugins/iview.js中修改 初始代码如下 import Vue from 'vue' import iView from 'iview' import locale from 'ivie ...

随机推荐

  1. DNS反射放大攻击分析——DNS反射放大攻击主要是利用DNS回复包比请求包大的特点,放大流量,伪造请求包的源IP地址为受害者IP,将应答包的流量引入受害的服务器

    DNS反射放大攻击分析 摘自:http://www.shaojike.com/2016/08/19/DNS%E6%94%BE%E5%A4%A7%E6%94%BB%E5%87%BB%E7%AE%80%E ...

  2. Redis学习笔记(五) 基本命令:Hash操作

    原文链接:http://doc.redisfans.com/hash/index.html 学习前先明确一下概念,这里我们把Redis的key称作key(键),把数据结构hash中的key称为fiel ...

  3. SQL Server 汉字转拼音字母

    /* 汉字转拼音首字母 */ create function fun_getPY(@str nvarchar(4000)) returns nvarchar(4000) as begin declar ...

  4. 搭建简单的Habernate环境(一)

    一.开篇 下载Habernate所需要的jar包和mysql驱动. 二.建立java项目并且导入所需要的包 三.建立实体类和配置映射文件 user实体类 package testPackage; pu ...

  5. vue入门--简单嵌套路由的一个路径小问题

    假设现在有一个项目,刚进去要显示main页面下的contorl页面,那么路由里面的初级路由应该是{main和err},这两个是同一级,然后{control和set}是main下的子路由,foot是这两 ...

  6. TextView 限制最大行数、最小行数、字数超过“...”表示

    最小行数: android:minLines = "2" //最小行数为2 最大行数: android:maxLines = "2" //最大行数为2 文字超过 ...

  7. ZBrush如何把不同材质赋予同一个模型上

    ZBrush 作为最专业的数字雕刻与绘画软件,能够制作出高质量的3D模型,包括模型的颜色贴图和材质属性.不同材质可以改变照明在表面上的反应,以便模型表现出光泽.凹凸.反射.金属性或透明效果.ZBrus ...

  8. luogu P2000 拯救世界 生成函数_麦克劳林展开_python

    模板题. 将所有的多项式按等比数列求和公式将生成函数压缩,相乘后麦克劳林展开即可. Code: n=int(input()) print((n+1)*(n+2)*(n+3)*(n+4)//24)

  9. Python笔记(28)-----继承

    来自https://blog.csdn.net/sunwukong_hadoop/article/details/80175292 1.Python的继承以及调用父类成员 python子类调用父类成员 ...

  10. Linux后台开发应该具备技能

    一.linux和os: 1.命令:netstat tcpdump ipcs ipcrm 这四个命令的熟练掌握程度基本上能体现实际开发和调试程序的经验 2.cpu 内存 硬盘 等等与系统性能调试相关的命 ...