Webpack懒加载React Router的页面组件
2023-09-27 14:28:55 时间
在浏览器打开React单页应用,习惯上会把整个应用所有的JS文件一次性加载完。什么?暂时不需要的JS文件也要加载,这肯定很慢吧?对。那你不妨试试下面这种对JS文件的懒加载,看合不合你项目使用。
一、安装bundle-loader依赖
npm i --save-dev bundle-loader
二、定义一个叫作lazy.js的React高阶类。
import React, {Component} from 'react' import PropTypes from 'prop-types' class Lazy extends 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((mod) => { this.setState({ mod: mod.default ? mod.default : mod }) }) } render () { return this.state.mod ? this.props.children(this.state.mod) : null } } Bundle.propTypes = { load: PropTypes.any, children: PropTypes.any } export default function lazy (lazyClass) { return function Wrapper (props) { return <Bundle load={lazyClass}> {(Clazz) => <Clazz {...props} />} </Bundle> } }
三、对<Router>部分的代码进行修改。
改前:
<Router history={hashHistory}> <div> <Route exact path={['/', '/index.html']} component={Home} /> <Route path='/case' component={Demo} /> <Route path='/about' component={About} /> <Route path='/article' component={Article} /> </div> </Router>
改后:
<Router history={hashHistory}> <div> <Route exact path={['/', '/index.html']} component={lazy(Home)} /> <Route path='/case' component={lazy(Demo)} /> <Route path='/about' component={lazy(About)} /> <Route path='/article' component={lazy(Article)} /> </div> </Router>
使用之前,记得先把lazy.js import进来。如
import lazy from './lazy.js'
看到没有,就是用一个叫做lazy()的方法,去包住原来的那个React自定义组件名,如Home, About等。
四、正常运行你的webpack的编译过程,你会发现原来所生成的单一的JS文件,如bundle.js,现在已经变成了像下面这样的四个文件。
bundle.js
bundle-0.js
bundle-1.js
bundle-2.js
bundle-3.js五、快去打开浏览器看看,是不是真的实现了JS懒加载。
如打开
http://localhost:7000/about
,会加载bundle.js和bundle-3.js![]()
image.png如打开http://localhost:7000/case,会加载bundle.js和bundle-1.js
![]()
image.png(本文供刁导参考)
作者:一米米尺
链接:http://www.jianshu.com/p/85371fbd1985
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
相关文章
- [转] Webpack-CommonsChunkPlugin
- How to use Babel without Webpack
- vue - webpack.base.conf.js
- webpack-配置
- 前端工具-webpack-sourceMap篇
- webpack打包提示: Uncaught Error: Cannot find module 'strip-ansi'
- webpack小结
- [js高手之路]Vue2.0基于vue-cli+webpack同级组件之间的通信教程
- 浅析前端依赖知识体系:依赖是什么(可执行代码与声明)、npm i 的依赖机制、node应用如何使用依赖(声明)、web应用的模块化导致依赖复杂、webpack如何把依赖打包(代码与声明)、组件开发如何更好的被依赖
- 浅析前端错误监控警报系统Sentry基本使用、私有化部署步骤及部署注意事项、使用webpack插件上传sourceMap
- webpack高级概念,eslint配置(系列十六)
- webpack入门
- webpack入坑之旅(五)加载vue单文件组件
- webpack 原理 实战 (1) 同步加载
- 10天掌握webpack 4.0 优化篇 (5)抽离公共代码
- webpack中require.context自动化注册,vue应用