Webpack懒加载React Router的页面组件
2017-10-23 08:50
771 查看
在浏览器打开React单页应用,习惯上会把整个应用所有的JS文件一次性加载完。什么?暂时不需要的JS文件也要加载,这肯定很慢吧?对。那你不妨试试下面这种对JS文件的懒加载,看合不合你项目使用。 一、安装bundle-loader依赖 [code]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
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
相关文章推荐
- React router+ webpack实现JS按需加载
- 详解webpack + react + react-router 如何实现懒加载
- Webpack + react-router 按需加载
- 利用 React/Redux/React-Router 4/webpack 开发大型 web 项目时如何按需加载
- React-router中,结合webpack实现按需加载
- webpack+react-router按需加载入门
- EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载
- 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)
- EasyDSS高性能流媒体服务器前端重构(五): webpack + vue-router 开发单页面前端实现按需加载
- React-router中结合webpack实现按需加载实例
- react---react router4.0路由中如何异步动态加载组件,webpack使用require.ensure()生成异步chunk
- [置顶] React-router-v4 - Webpack 实现按需加载(code-splitting)
- react-router4 配合webpack require.ensure 实现异步加载的示例
- webpack+react-router实现代码拆分按需加载(上)
- 基于react16 webpack3 搭建前端spa基础框架 react-router的4种异步加载方式
- webpack+react-router实现代码拆分按需加载(下)
- EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载 - 副本
- 关于在reactjs项目中如何用webpack配置组件按需加载
- 基于react16 webpack3 搭建前端spa基础框架 react-router的4种异步加载方式
- 基于 Webpack 2 的 React Router 懒加载路由配置