react路由懒加载（异步组件）-react-loadable

守纪律的孩子 發表於 2019-7-18 16:01:00

react路由懒加载（异步组件）------react-loadable

<div>
<div class="cnblogs_code">
<pre>https://www.npmjs.com/package/react-loadable</pre>
</div>
<h4>安装</h4>
<div class="cnblogs_code">
<pre>cnpm install react-loadable</pre>
</div>
<h4>基本使用</h4>
假设现在项目中有个 home页面组件<code>src/pages/home/index.js</code>
<div class="cnblogs_code">
<pre>import React, { Component } from 'react'
class Home extends Component {
render(){
 return (
 <div>这个是home页面</div>
 )
}
}

export default Home</pre>
</div>
在没有使用react-loadable之前，在我们的route.js里面是直接import Home这个组件的<code>router.js</code>
<div class="cnblogs_code">
<pre>import React, { Fragment } from 'react'
import { BrowserRouter, Route } from 'react-router-dom'

import Home from '@pages/home'

const Routes = () => (
<BrowserRouter>
 <Route path="/home" component={Home}/>
</BrowserRouter>
);

export default Routes</pre>
</div>
运行项目后我们可以看chrome的network记录
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="985" data-height="96"><img src="//upload-images.jianshu.io/upload_images/13890429-9a987ca248cfa9dd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/985/format/webp" alt="" data-original-src="//upload-images.jianshu.io/upload_images/13890429-9a987ca248cfa9dd.png" data-original-width="985" data-original-height="96" data-original-format="image/png" data-original-filesize="23143"></div>
</div>
<div class="image-caption">image</div>
</div>
 
可以看到1.chunk.js是687k
现在我们来添加react-loadable
在home文件下新建一个<code>loadable.js</code>文件
<div class="cnblogs_code">
<pre>src/pages/home/loadable.js

import React from 'react';
import Loadable from 'react-loadable';

//通用的过场组件
const loadingComponent =()=>{
return (
 <div>loading</div>
)
}

export default Loadable({
loader:import('./index.js'),
loading:loadingComponent
});</pre>
</div>
然后再router里面调用
<div class="cnblogs_code">
<pre>import React, { Fragment } from 'react'
import { BrowserRouter, Route } from 'react-router-dom'

import Home from '@pages/home/loadable'

const Routes = () => (
<BrowserRouter>
 <Route path="/home" component={Home}/>
</BrowserRouter>
);

export default Routes</pre>
</div>
 
现在再看看chrome的network记录
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="998" data-height="139"><img src="//upload-images.jianshu.io/upload_images/13890429-cba9972914d8fb3f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/998/format/webp" alt="" data-original-src="//upload-images.jianshu.io/upload_images/13890429-cba9972914d8fb3f.png" data-original-width="998" data-original-height="139" data-original-format="image/png" data-original-filesize="30130"></div>
</div>
<div class="image-caption">image</div>
</div>
这个时候1.chunk.js是156k，因为只加载首页所需的依赖，所以体积会小很多，而且这个差距会随着项目的增大而变大
看代码，可以知道，工作原理其实就是在页面组件上有包了一成高级组件来代替原来的页面组件
<h5>到这里，代码分割其实已经解决了，但是如果项目有100个页面，那laodable.js就需要写100遍，这样就感觉有点冗余了，所以这个我们可以封装一下</h5>
首先，我们建一个util    <code>src/util/loadable.js</code>
<div class="cnblogs_code">
<pre>import React from 'react';
import Loadable from 'react-loadable';

//通用的过场组件
const loadingComponent =()=>{
return (
 <div>loading</div>
)
}

//过场组件默认采用通用的，若传入了loading，则采用传入的过场组件
export default (loader,loading = loadingComponent)=>{
return Loadable({
 loader,
 loading
});
}</pre>
</div>
 
不难看出，我们可以将按需加载的组件和过渡组件通过参数传入最后返回包装后的组件，如此一来，home下面的laodable.js就不需要再建了
router里面调用方式改为如下
<div class="cnblogs_code">
<pre>import React, { Fragment } from 'react'
import { BrowserRouter, Route } from 'react-router-dom'
import loadable from '../util/loadable'

const Home = loadable(()=>import('@pages/home'))

const Routes = () => (
<BrowserRouter>
 <Route path="/home" component={Home}/>
</BrowserRouter>
);

export default Routes</pre>
</div>
 
封装之后，laodable只需写一次，改变的只是组件的引入方式，这样一来就方便多了，
react-loadable是以组件级别来分割代码的，这意味着，我们不仅可以根据路由按需加载，还可以根据组件按需加载，使用方式和路由分割一样，只用修改组件的引入方式即可
</div>
 
来源：https://www.cnblogs.com/SRH151219/p/11207919.html

頁: [1]

琼殿技术论坛's Archiver

react路由懒加载（异步组件）------react-loadable