vue项目打包的时候,如果项目比较庞大,那么将会打出一个很大的包,速度比较慢,这个时候可以考虑拆分,不要把所有的内容都打到一个包里面去。

路由懒加载

我们平常使用router可能如下:

先用import引入,然后在component里面配,这种其实是同步模式,也就是说你这样写,ddd.vue组件里的代码会被打入总包里面。

还有一种和上面类似的同步写法,使用require去写的:

如果要从总包里分出去,就要用到异步加载组件,改造起来也很简单:

改造之后,我们打包的时候就会发现多出来一些js:

然后请求异步路由的时候,也会发现额外请求了js:

这表示异步路由的内容被单独打包出来了,只在跳转在当前路由的时候加载。

还有一种异步请求的写法:

注意()=>import ('./bbb.vue')和(resolve)=>require(['./bbb.vue'],resolve)这两种写法,两者实现异步的机制不一样,内部处理逻辑也不同。

组件懒加载

除了路由可以实现懒加载,组件的引用其实也可以分出去,我们先来看看平常的组件引用:

我们可以改造成异步请求,让它的打包代码从主包中分割出去:

不过注意异步加载组件,组件就不是立马出现,而是要等一会才能出现,会出现一个短暂空白,这种根据情况具体使用。

store.registerModule

我们平常用store都是统一模块注册,例如:

这种的话会打到总包里的,如果想打在外面的包的话,可以用store.registerModule,store.registerModule是store的动态模块注册,也就是在需要的时候引用就好了。

我们可以看看store.registerModule的用法:

我们在created的时候注册ccc模块,destroyed的时候销毁ccc模块,然后其他的使用没什么变化,看起来好像变复杂了,那么这样写到底有啥好处呢?

还记得上面讲到的路由懒加载和组件懒加载吧,如果在异步组件里面使用这种store.registerModule的话,可以让动态store代码和组件代码一起从总包里面分离出去,否则store代码还是在总包里面。

如果store模块是在全局注册的,那么打包的时候就在总包里:

如果store模块是在动态注册的,那么打包的时候就在分包里:

注意,上面的前提是动态注册store模块的组件本身就是异步加载的,才能和组件一起打出去,假如组件本身就是同步加载的,那么是不会打出去的。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字