在react-router中进行代码拆分
随着react项目的迭代开发,会发现build 下静态文件包的体积会越来越臃肿,首次浏览网页,白屏或loading时间越来越长,所以代码拆分非常必要:
一、 react-loadable 组件拆分:
安装:
npm install react-loadable -S;
使用方法: App组件中导入 react-loadable组件,app.js 中引入一下代码
:
import Loadable from 'react-loadable';
import Loading from './my-loading-component';const LoadableComponent = Loadable({loader: () => import('./my-component'),loading: Loading,
});export default class App extends React.Component {render() {return <LoadableComponent/>;}
}
Loading 组件内容:
import React from "react"export default () => {return <div style={{ position: "fixed", left: "50%", top: "50%"}}>Loading......</div>}
二、异步函数拆分
创建异步组件:
在src目录下创建异步组件 AsyncComponent
import React, { Component } from 'react';
export default function asyncComponent(importComponent) {
class AsyncComponent extends Component {constructor(props) {super(props);this.state = {component: null};}async componentDidMount() {const { default: component } = await importComponent();this.setState({component: component});}render() {const Com = this.state.component;return (Com ? <Com {...this.props} /> : null)}
}return AsyncComponent;
}
使用异步组件
我们将使用它asyncComponent来动态导入我们想要的组件。
const Home = asyncComponent(() => import("./components/Home"));
而不是静态导入我们的组件。
import Home from "./components/Home";
实例:
import React, { Component } from 'react';
import './App.css';
import { Provider } from 'react-redux'
import store from "./store"
import { HashRouter as Router, Switch, Route } from "react-router-dom"
import Home from "./Home"
import { AppContainer } from 'react-hot-loader';
import asyncComponent from "./AsyncComponent"
const Abc= asyncComponent(() => import("./Abc"));
const Bac = asyncComponent(() => import("./Bac"));
class App extends Component {
static state = {
}
static submint = () => {
}
render() {
return (<AppContainer><Provider store={store}><Router><Switch><Route exact path="/" component={Home} /><Route exact path="/home/aa" component={Abc} /><Route exact path="/home/bb" component={Bac} /></Switch></Router></Provider></AppContainer>
);
}
}
export default App;
三、require.ensure() 方法
在webpack 2的官网上写了这么一句话:
require.ensure() is specific to webpack and superseded by import().
所以,在webpack 2里面应该是不建议使用require.ensure()这个方法的。但是目前该方法仍然有效,所以可以简单介绍一下。包括在webpack 1中也是可以使用。下面是require.ensure()的语法:
require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)
require.ensure()接受三个参数:
第一个参数dependencies是一个数组,代表了当前require进来的模块的一些依赖;
第二个参数callback就是一个回调函数。其中需要注意的是,这个回调函数有一个参数require,通过这个require就可以在回调函数内动态引入其他模块。值得注意的是,虽然这个require是回调函数的参数,理论上可以换其他名称,但是实际上是不能换的,否则webpack就无法静态分析的时候处理它;
第三个参数errorCallback比较好理解,就是处理error的回调;
第四个参数chunkName则是指定打包的chunk名称。
因此,require.ensure()具体的用法如下:
require.ensure([], require => {
let chat = require('/components/chart');
someOperate(chat);
}, error => {
console.log('failed');
}, 'mychat');
});
在react-router中进行代码拆分相关推荐
- React Router 中文文档(一)
React Router 中文文档(一) React Router 中文文档(一) 官方英文文档 - https://reacttraining.com/rea... 版本 - v4.2.0 < ...
- React Router教程–如何使用代码示例渲染,重定向,切换,链接等
If you have just started with React, you are probably still wrapping your head around the whole Sing ...
- react router
目录 前言 核心 1.内置的组件 2.内置的路由器组件 3.History 对象 4.Location 对象 5.react router 的安装包 一.React-Router v1 1.一些概念 ...
- React Router 4 简易入门
React Router4是一个流行的纯React重写的包.现在的版本中已不需要路由配置,现在一切皆组件. 本文涵盖了开始使用React Router构建网站所需要的一切知识.我们将会为本地运动队制作 ...
- Vue性能优化:如何实现延迟加载和代码拆分?
移动优先方法已经成为一种标准,但不确定的网络条件导致应用程序快速加载变得越来越困难.在本系列文章中,我将深入探讨我们在Storefront应用程序中所使用的Vue性能优化技术,你们也可以在自己的Vue ...
- 使用React Router以编程方式导航
通过react-router我可以使用Link元素来创建由react路由器本地处理的链接. 我在内部看到它调用this.context.transitionTo(...) . 我想从下拉列表中进行导航 ...
- React Router 学习
本次使用react-router 版本为 5.0.1 本教程前提是你的应用程序是一个web应用程序,使用'react-router-dom'包来实现页面的路由 在React router中有三种类型的 ...
- 通过延迟加载和代码拆分提高网站性能
by José M. Pérez 由JoséM.Pérez 通过延迟加载和代码拆分提高网站性能 (Improve the Performance of your Site with Lazy-Load ...
- 组件和高阶组件区别_为什么要对高阶组件使用代码拆分
组件和高阶组件区别 by Nitish Phanse 由Nitish Phanse 为什么要对高阶组件使用代码拆分 (Why you should use code splitting with hi ...
最新文章
- 卧槽!又一个Python神器!
- 【重磅】中国AVS2标准被国际超高清联盟UHD Forum采纳,推荐给全球视频服务商
- leetcode359. 日志速率限制器
- ubuntu切换root用户
- 【BZOJ1901】Dynamic Rankings,树状数组套主席树
- 命令级的python静态资源服务。
- linux中docker容器与宿主系统之间文件拷贝
- php学习的一些笔记
- 用P3P header解决iframe跨域访问cookie
- xp 计算机桌面图标不见,萝卜XP系统桌面图标全部消失了如何解决
- 计算机系统结构——考题
- 2019最新《网易云课堂 C++收银系统项目实战教程》 C++开发网吧收银系统(MFC+ADO)
- 全国计算机三级网络技术题库南开,计算机三级网络技术上机题库《南开100题》最新版...
- 【转载】分析Windows的死亡蓝屏(BSOD)机制
- AI智能尺寸测量仪简介(图像尺寸测量仪)
- 使用Hourglass网络来理解人体姿态
- 帝国php数据库备份,帝国cms备份王怎么使用
- mac数字键盘错乱_苹果手机数字键盘 苹果电脑键盘打不出数字解决办法
- 小米mini路由小米3 PandoraBox下载地址
- 需求与商业模式创新-商业模式考试复习
热门文章
- CPU_X86架构和ARM架构入门篇
- 爬虫学习笔记(三)—— requests库
- 打印杨辉三角形知识点_用编程方法打印杨辉三角形
- java 中 a = a++ 的分析
- python集合的并集、交集_Python 集合set()添加删除、交集、并集、集合操作详解
- access设计视图打不开_定制橱柜衣柜怎么测量才能避免出错?(设计师必看)
- 计算机网络技术教法改革方案,计算机网络实验论文,关于“计算机网络”教学改革相关参考文献资料-免费论文范文...
- 点击php文件显示下载文件,求助 为什么编的下载文件代码,打开后下的全是php文件...
- 数据结构实验之栈与队列十一:refresh的停车场
- 2.修改/etc/hosts文件 /安装SSH、配置SSH无密码登陆(全程切换到hadoop用户下操作)