在浏览器打开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
如打开http://localhost:7000/case,会加载bundle.js和bundle-1.js
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。