当vue中两个页面使用到体积较大的包时,有什么优化办法吗?

vue项目中有两个页面,里面都用到了一个编辑器插件,但是编辑器插件的体积较大,影响加载速度,而且两个页面都使用了,这样造成两个页面加载都慢,所以就把编辑器封装成了一个组件,想着只用加载一次另外一个页面加载会快一些,但是好像不是这样的,具体如下:
图片描述

请问遇到这样的情况应该如何优化?封装成组件,在两个页面中引入组件好像实际和在页面中直接使用插件是差不多的。求解,谢谢。

阅读 2.9k
5 个回答

异步加载组件
components: {
aaa: resolve=> {

require(['./aaa.vue'],resolve)

}
}

将编辑器按照你所需的逻辑封装成一个组件,如:my-editor
A和B页面懒加载该编辑器组件

const MyEditor = () => import('@/xx/my-editor')

components: {
    MyEditor
}

别小看 webpack 。。。只要你不是复制粘贴代码,webpack 都能做到非常极致的打包,去重。

推荐问题
宣传栏