react-router v4 按需加载的配置方法
在react项目开发中,当访问默认页面时会一次性请求所有的js资源,这会大大影响页面的加载速度和用户体验。所以添加按需加载功能是必要的,以下是配置按需加载的方法:
安装bundle-loader
npm install --save-dev bundle-loader
定义Bundle.js
import React, { Component } from 'react';
export default class Bundle extends React.Component {
constructor(props) {
super(props);
this.state = {
// short for "module" but that's a keyword in js, so "mod"
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((mod) => {
this.setState({
// handle both es imports and cjs
mod: mod.default ? mod.default : mod
})
})
} render() {
if (!this.state.mod)
return false
return this.props.children(this.state.mod)
}
}
app.jsx配置
import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter, Route } from 'react-router-dom';
import * as routePaths from './js/constants/routePaths';
import Bundle from './js/constants/Bundle.js';
//默认打开页面直接引入
import Index from './js/pages/Index';
//其他页面异步引入
import CardContainer from 'bundle-loader?lazy&name=app-[name]!./js/pages/Card';
import './assets/css/index.scss'; const Card = () => (
<Bundle load={CardContainer}>
{(Card) => <Card />}
</Bundle>
) ReactDOM.render((
<HashRouter>
<div className="container">
<Route path={routePaths.INDEX} exact component={Index} />
<Route path='/card' component={Card} />
</div>
</HashRouter>
),
document.getElementById('app')
);
webpack.config.js 修改
webpackConfig.output = {
path: path.resolve(__dirname, 'build/' + config.ftpTarget),
publicPath: config.publicPath + '/',
filename: 'js/[name].js',
chunkFilename: 'js/[id].js'
}
这样就可以实现页面js资源按需加载了,打包后的文件命名可以根据自己需要设置。
react-router v4 中文官网:http://reacttraining.cn/web/guides/quick-start
react-router v4 按需加载的配置方法的更多相关文章
- react 实现路由按需加载
import() 方法: async.js 文件内容: import React from 'react'; // import "babel-polyfill"; //compo ...
- React引入AntD按需加载报错
背景:React使用create-react-app脚手架创建,然后yarn run eject暴露了配置之后修改less配置, 需求:实现antd组件按需加载与修改主题. 一开始是按照webpack ...
- react 使用antd 按需加载
使用 react-app-rewired 1. 安装react-app-rewired: 由于新的 react-app-rewired@2.x 版本的关系,你还需要安装 customize-cra. ...
- react antd样式按需加载配置以及与css modules模块化的冲突问题
通过create-react-app脚手架生成一个项目 然后运行npm run eject 把webpack的一些配置从react-scripts模块弹射出来, 方便自己手工增减,暴露出来的配置文件在 ...
- iview简单使用+按需加载组件的方法(全局和局部)
1,简单使用 vue项目中使用iview非常简单: 首先安装依赖: $ npm install iview --save 会安装最新版本的依赖,安装完成后package.json会出现如下图配置 表示 ...
- react CRA antd 按需加载配置 lessloader
webpack配置 webpack.config.dev.js, webpack.config.prod同理. 'use strict'; const autoprefixer = require(' ...
- 在webpack自定义配置antd的按需加载和修改主题色
最近使用antd来做react项目的UI.从antd官网上,在使用create-react-app脚手架搭建项目时步骤如下: (1)添加模块 react-app-rewired, babel-plug ...
- Vue性能优化之组件按需加载(以及一些常见的性能优化方法)
关于Vue中的按需加载我就简单介绍一下:大概就是我们所有的东西都会在app.js里面,但是我们并不需要把所有的组件都一次性加载进来,我们可以在需要它的时候再将它加载进来,话不多说,开车! 1.webp ...
- React Router 4.0 + webpack 实现组件按需加载
网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...
随机推荐
- Java Scanner用法详解
一.Scanner类简介 Java 5添加了java.util.Scanner类,这是一个用于扫描输入文本的新的实用程序.它是以前的StringTokenizer和Matcher类之间的某种结合.由于 ...
- postman的使用大全
转载 https://blog.csdn.net/fxbin123/article/details/80428216
- [Spark]如何设置使得spark程序不输出 INFO级别的内容
Spark程序在运行的时候,总是输出很多INFO级别内容 查看了网上的一些文章,进行了试验. 发现在 /etc/spark/conf 目录下,有一个 log4j.properties.template ...
- FineUIPro/Mvc/Core/JS v4.2.0 发布了(老牌ASP.NET控件库,WebForms,ASP.NET MVC,Core,JavaScript)!
还记得 10 年前那个稍微青涩的 ExtAspNet 吗,如今她已脱胎换骨,变成了如下 4 款产品: FineUIPro:基于jQuery的经典款ASP.NET WebForms控件,之前的FineU ...
- PS快速秒抠图技巧
1,首先,打开图片,复制一层为图层1,养成原图保存好,在新图层上操作的习惯 2,点击菜单栏“选择”选择 - “色彩范围”命令,面板如下图所示: 3, 选择左边第一个吸管工具吸取人物模特后面的背景颜色, ...
- mysql自动断开该连接解决方案
mysql连接的空闲时间超过8小时后 MySQL自动断开该连接解决方案 作者: MySQL 的默认设置下,当一个连接的空闲时间超过8小时后,MySQL 就会断开该连接,而 c3p0 连接池则以为该被断 ...
- 关于token登录逻辑分析
前言: token登录上一家公司也写过,迷迷糊糊的, 现在做一个APP,需求为每次调用接口都会传token,登录注册等特殊的除外, 逻辑整理一下还是比较简单的 主要的问题还是,如何在框架中找到较好的插 ...
- Oracle篇 之 查询行及概念
Oracle: s_emp s_dept s_region 行:Row(tuple) 列:Column(attribute) conn:改变用户 Drop:删除用户 drop user bri ...
- Docker 安装应用
Docker 安装应用 安装 odoo 10 : docker pull postgres:9.6 &&docker pull odoo:10 && docker ru ...
- .Net Core实践1
实践目标 编写经典的hello world程序.使用.netcore框架,然后运行在linux上. .netcore目前已经是2.1版本了,可以简单的认为是一种跨平台的.net framework,除 ...