react 按照一级路由分包加载-CSDN博客

按需加载

一开始整个项目只有一个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日

作者：掘金

本文来源：掘金如需转载请联系原作者