X
    Categories: jsvue

vue 组件 component 误区,组件体积过大

vue 组件 component 在使用中很方便,在做一个后台管理系统时,却使用component 造成js体积庞大问题;

就这个问题,进行了优化,记录如下:

项目描述:

后台管理,公共头部,公共左侧栏目,右侧内容区域;

使用 main.js  将右侧页面全部载入,判断了页面 hash,将右侧对应的 vue 绑定给 rightComponent,页面使用

<rightComponent></rightComponent> 进行载入;

问题:build.js 文件非常大(2M左右);

解决方法:不在main中去载入右侧页面,有了下面的方案:

增加了动态加载页面(rightContent),入口vue 加载了rightContent,rightContent根据hash动态return 对应的组件;

rightContent 必须载入全部的右侧页面;

问题:build.js 文件变小了,但其它的页面js *.build.js 变得很大(2.5M左右);优化前一个js文件 2M,优化后多个js文件 2M;

解决方法:肯定是动态载入组件造成的,其实说是动态,但是必须全部import,造成体积庞大;那就回归原始方法,将header和leftMenu组件化;

然后路由直接访问右侧vue页面,每个vue页面增加 header 和 leftMenu,至此js 大小终于得到控制;

总结,vue 组件化后,需要使用组件的页面再import;全部 import 就会造成 js 体积大的问题;

思考:像后台这种页面layout,上边、下边、左边一般都固定,只有中间内容在变幻,有真正能动态载入vue组件的方式就很方便了

文中提到的动态载入vue组件,这种方式需要载入全部的vue组件(https://segmentfault.com/q/1010000007148050)

 

打赏
微信扫一扫,打赏作者吧~
admin :