背景

image.png

代码分包

webpack 动态引入

image.png
通过动态引入，然后.then里面调用结果。后续webpack打包时，就会对其进行分包的操作

分包后
image.png
image.png
image.png分包前

异步组件

image.png
更多的是通过Vue Router 中使用，原理就是异步组件。

正常组件：一般组件会打包在一起
image.png

异步组件使用

1、引入
image.png

2、创建
image.png
参加的参数有两种，见下

3、注册组件
image.png

4、打包，分包
image.png

异步组件函数参数

方式一：工厂函数（简单）

image.png

方式二：对象（更多功能）

image.png
还有一个onError函数
image.png

异步组件和Suspense

image.png
image.png
内置组件，不用引入和注册