按需加載

一開始整個項目只有一個bundle.js，壓縮之后達到了4M。導致首屏加載速度很慢，需要優化。

方案

優化包大小，從業務角度出發，抽離重復的業務組件，避免大規模的90%相似度代碼。需要對業務熟悉，一時間優化沒有那么明顯。

從技術角度，項目里面使用了react route，那能不能按照路由按需加載呢？

import()

之前

import { add } from './math';

console.log(add(16, 26));
復制代碼

之后

import("./math").then(math => {
console.log(math.add(16, 26));
});
復制代碼

利用import(), webpack會幫我們算依賴和局部更新。

按需加載路由

正常情況

一般是項目不大的情況下，會直接使用如下配置

import React, { Component } from 'react';
import { Route } from 'react-router-dom';

import a1 from '../components/a/a1/index.js';

const routes = (
<div className='content'>
<Route exact path="/a/a1" component={a1} />
</div>
)

export default routes;
復制代碼

這個是路由提前預定好，webpack打包時候會將a1打包到bundle里面。但是erp有140多個route，會導致整個bundle無限變大。

改進

route的component本質就是個react.component

結合import()構造一個加載component

class LoaderA extends Component {
constructor(props) {
super(props);
this.state = {
loaded: true,
loading: null,
A: null
}
}

componentDidMount() {
setTimeout(() => {
import('../components/a/a1/index.js').then((e) => {
this.setState({
A: e.default,
loaded: false
})
})
}, 2000)
}

render() {
let { A } = this.state;
if (this.state.loaded) {
console.log('loading');
return <div><span>loading...</span></div>;
}
return <A />
}

}
復制代碼

LoaderA就是個組件，沒有加載到A之前，用占位符，import()之后，再setState渲染真正組件

在稍微改下route配置

<Route exact path="/a/a1" component={LoaderA} />
復制代碼

查看運行例子

React Loadable

利用上面的原理，我們就可以自己優化異步加載了，而React Loadable正是這個方案的優秀的庫。

改寫上面的LoaderA

import Loadable from 'react-loadable';

const LoaderA = Loadable({
loader: () => import('../components/a/a1/index.js').then(a1=> a1.default),
loading() {
return <div>Loading...</div>
}
});

<Route exact path="/a/a1" component={LoaderA} />
復制代碼

但是我們的正式環境的路由有150多個，不能每個都這么去配置，造成顆粒化嚴重，維護也不好維護了。

那能不能考慮按照一級路由進行切分，把一個大的bundle會切割幾個小的bundle。

路由配置

在一級路由下面抽取route和組件之間關系

const config = [
{
bExact: true,
hash: '/a/a1',
key: 'a1'
},
{
bExact: true,
hash: '/a/a2',
key: 'a2'
}
//....
];
復制代碼

導出配置

export default config.map(val=> {
return (
<Route
exact = {val.bExact? true : false}
path={val.hash} key={val.key} component={
Loadable({
loader: val.import?() => val.import().then((e)=> {
return e[val.key]
}): () => import('./pages.js').then((e)=> {
return e[val.key]
}),
loading: Loading
})
} />
)
});
復制代碼

這里就通過提取cofig配置信息，最核心的代碼是loader處理。

() => import('./pages.js').then((e)=> {
return e[val.key]
})
復制代碼

這里處理跟之前不一樣了，是個動態值了，那么pages.js里面的組件就需要跟config里面的key值保持一致。

import a1 from '../components/a/a1/index.js';
import a2 from '../components/a/a2/index.js';
export {
a1,
a2
}
復制代碼

pages.js則是當前一級路由下面所有的組件。

而在總route里面進行加載各個子路由

import a from 'components/a/routes';
import b from 'components/b/routes';
import c from 'components/c/routes';
import d from 'components/d/routes';

const routers = [
...a,
...b,
...c,
...d
];
復制代碼

這樣就將整個bundle這么細分到各個子路由里面去了，后面如果某個一級變的臃腫了，可以繼續將其按照二級路由進行拆分。

查看效果

線上優化效果

原先一個bundle.js 拆分成了10個bundle.js, 而且依托于webpack的強大，能夠做到局部更新bundle.

總結

回過頭來看，整個優化都是基于import()，這個來的。那么import()背后發生了什么呢？

異步加載js

拋開webpack，如何異步加載js呢？很多人都會愣了一下，其實很簡單，動態創建一個script標簽。

var _ayncFunc = function(src, cb) {
var body = document.getElementsByTagName('body')[0];
var s = document.createElement('script');
s.src = src;
s.onload = function() {
cb && cb();
};
body.appendChild(s);
};
復制代碼

這樣子去加載js，webpack內部將異步js默認為一個chunk，就相當于多了chunk。很好理解import()為啥能夠異步加載，而且能夠計算重復內容了。

webpack實現

本文地址?xiaoqiang730730.github.io/2018/04/06/…

原文發布時間為：2018年07月02日

作者：掘金

本文來源：掘金?如需轉載請聯系原作者

總結

以上是生活随笔為你收集整理的react 按照一级路由 分包加载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。