Obeta

使用webpack的code splitting

webpack中的统一打包成bundle很不错,但是随着应用程序的增长,bundle体积也会增长.尤其是包含了大型第三方库.

你需要留意你代码中包含的第三方库或者自己大量的组件,这样你的 bundle 才不会随着时间而变得太大,以致于你的应用程序需要很长时间才能加载出来,延长了用户的等待时间.为了防止这个情况的出现,我们需要及早的使用 webpack 的Code Splitting功能.

介绍

如果你使用的 webpack 是 2+以上,那么不需要进行额外的设置,直接可以使用一个 webpack 实现的函数import().

import()已经走到了最近的Stage 3提案中,因此这个很大概率会被采纳进入ECMAScript标准中,目前还需要搭配 webpack 使用.

这个代码分隔跟使用的框架并没有什么关系,如果你是自己从头开始搭建的一个开发项目,那么你最好去看看 webpack 关于代码分隔的文档.

不过最好建议你直接使用官方推荐的 create way,比如 react 的create-react-app和 vue 的vue-cli,这两个脚手架已经有了一整套的 ready 方案,个人觉得 react 的那个文档很不错,生态链好太多了,从那个文档里学到了很多最新的 development method 和一些提升"幸福感"的工具.

使用

  • 之前:
import { add } from './math';

console.log(add(16, 26));
  • 使用import后:
import("./math").then({math} => {
  console.log(math.add(16, 26));
});

需要注意的是import()返回的是一个Promise,因此你需要在then中使用,或者使用async/await.

工具

由于import()返回的是一个Promise,因此不能直接使用,在 react 中使用react-router就会很尴尬,因此这里介绍一个 react 的工具库React Loadable, 使用 vue 的同学可以离开了...

import Loadable from 'react-loadable';

const LoadableOtherComponent = Loadable({
	loader: () => import('./OtherComponent'), // 动态引入的组件
	loading: () => <div>Loading...</div>, // 正在加载
});

const MyComponent = () => <LoadableOtherComponent />;

更多高级的用法可以去 github 页面看一下,可以设置超时显示和错误捕捉的.

引用

个人随笔记录,内容不保证完全正确,若需要转载,请注明作者和出处.