原文来自我的github: https://github.com/Vibing/blog
代码拆分与动态导入
当项目越做越大时,体积过大导致加载速度过慢,性能问题直接影响用户体验。
这时我们会考虑将代码拆分。
拆分,顾名思义就是将一个大的东西拆分成N个小的东西,用公式表示就是:Sum = n * Sub
代码拆分基于动态导入
什么是动态导入?就是我需要什么,你给我什么,我不需要的时候,你别给我,我嫌重。
动态导入可以将模块分离成一个单独的文件 在需要的时候加载进来。
对于动态导入,webpack 提供了两个类似的技术。
- 第一种,也是优先选择的方式是,使用符合 ECMAScript 提案 的
import()
语法。 - 第二种,则是使用 webpack 特定的
require.ensure
。
从webpack 2以后,一般使用第一种。
async-loadable
由于import()
方法返回的是Promise
对象,我们为了能方便的返回组件,
这里推荐使用async-loadable插件
例子代码:
import loadable from 'async-loadable';
import Loading from './my-loading-component';
const LoadableComponent = loadable({
loader: () => import('./my-component'),
loading: status => <Loading {...status}/>,
});
export default class App extends React.Component {
render() {
return <LoadableComponent/>;
}
}
代码里有熟悉的 import()
方法。async-loadable
使用 webpack
的动态导入,调用loadable
方法可以方便的返回要使用的组件。
下面我将以我本人的项目经历,来讲解代码拆分(code splitting)
代码拆分前
当初还是小白的我,一开始哪知道有代码拆分这个技术啊,就一个人负责一个小项目,一开始项目不大,跑起来也是嗖嗖的,这里先贴一下路由代码:
import Home from './home';
import Page1 from './page1';
import Page2 from './page2';
<Route exact path="/" component={Home}/>
<Route path="/page1" component={Page1}/>
<Route path="/page2" component={Page2}/>
这里没有使用动态导入,而是直接将所有页面静态引入进来,然后赋到对应路由上。
这么做的坏处就是:打包时,整个项目所有的页面都会打包到一个文件中,随着页面增多,这个文件也越来越大,最后我看了一下,达到了近25M(我吓得打开度娘...)。
如果用一张图来表示的话,这张图在适合不过了:
哈哈,整个一坨有没有。所有路由在这一坨红色里,看着真特么憋屈啊
基于路由的代码拆分
打开度娘的我脸色渐渐有了好转,通过搜索,看到了webpack有个code splitting
功能(代码拆分),
前面说过,代码拆分其实就是使用动态导入的技术实现的,那么我们就使用动态导入来优化一把之前的路由:
import Loadable from 'async-loadable';
import Loading from './my-loading-component';
const Home = Loadable({
loader: () => import(`./home`),
loading: Loading
});
const Page1 = Loadable({
loader: () => import(`./page1`),
loading: Loading
});
const Paeg2 = Loadable({
loader: () => import(`./page2`),
loading: Loading
});
<Route exact path="/" component={<Home />} />
<Route path="/page1" component={<Page1 /> } />
<Route path="/page2" component={<Page2 /> } />
我们不再使用 import module from 'url' 来静态引入模块,而是使用 loadComponent
来动态导入,它返回的是Loadable
的结果,也就是我们想要的组件,我们把再把组件给对应的路由,这就完成了基于路由的代码拆分。
使用以后,鄙人怀着激动的心情开始打包项目,当我看到控制台的打包日志时,我的表情是这样的:
咳咳,这种好事情当然要分享一下啦,你要的结果:
可以看到,webpack打包时已经将之前的一个臃肿文件按路由拆分成了三个文件,当我们点击一个路由时,会动态加载对应的文件。
比如我点击home
页面的路由时:
我再点击page1
时:
嗯,是按照路由来拆分的代码,完美~
这样看来,我们需要将之前的那张图改成这样的:
看着项目加载速度变快了,心里真特么高兴
基于模块拆分
其实基于路由的代码拆分已经可以满足绝大多数项目了,再大的项目也能满足。
但随着项目做的多了,慢慢的发现了一个问题:代码浪费。
比如我要做一个Tab切换的功能,像酱紫的:
对应的代码大概是酱紫的:
import { Tabs } from 'antd';
import TabOne from './component/tab1';
import TabTwo from './component/tab2';
import TabThree from './component/tab3';
const TabPane = Tabs.TabPane;
export default class Home extends Component {
render() {
return (
<Tabs defaultActiveKey="1">
<TabPane tab="Tab 1" key="1">
<TabOne />
</TabPane>
<TabPane tab="Tab 2" key="2">
<TabTwo />
</TabPane>
<TabPane tab="Tab 3" key="3">
<TabThree />
</TabPane>
</Tabs>
);
}
}
Tab切换,每个前端小伙伴都做过,其实说白了,就是显示隐藏的效果。
但是在这个页面中,已经把每个Tab里的代码都加载进来了,如果用户只看第一个Tab,其他Tab不点击,就造成了代码浪费。
如何解决这个问题呢?还是那句话:我需要什么,你给我什么,我不需要的时候,你别给我,我嫌重。
我们使用动态导入的方式改造一下代码:
import { Tabs } from 'antd';
import Loadable from 'async-loadable';
import TabOne from './component/tab1';
import Loading from './component/loading';
const TabPane = Tabs.TabPane;
const loadComponent = path =>
Loadable({
loader: () => import(`${path}`),
loading: Loading
});
const Tab2 = loadComponent('./component/tab2.tsx');
const Tab3 = loadComponent('./component/tab3.tsx');
export default class Home extends Component {
render() {
return (
<Tabs defaultActiveKey="1">
<TabPane tab="Tab 1" key="1">
<TabOne />
</TabPane>
<TabPane tab="Tab 2" key="2">
<Tab2 />
</TabPane>
<TabPane tab="Tab 3" key="3">
<Tab3 />
</TabPane>
</Tabs>
);
}
}
同样 我们不再使用import module from 'url'
的方式,而是使用 loadComponent
方法动态导入。
由于TabOne是第一个默认显示的,所以没必要动态导入。
现在我们来点击Tab 2看看效果:
非常棒,正是我们想要的。
再点击Tab 3 :
简直完美!😄
到目前为止,我们基于模块的代码拆分就完成了,我们把之前的拆分图再改一下:
看上去爽朗了很多啊!
总结
基于路由的代码拆分可以很大程度上减轻代码的臃肿,但依然会存在不会被使用的组件被import进来,导致代码浪费。
本人认为,既然是组件化时代,那么就应以组件为核心,将动态导入颗粒化到组件而不是路由,将会带来更合理,性能更高的项目优化。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。