项目上线了,发现页面加载过慢,追其原因,发现打包后文件也依然2M大小,然后发现了vux是个大坑,部分vue组件居然会把整个vux引进去。
通过测试发现:
import {} from ‘vux‘
这样虽然使用的vux组件的样式没有渲染上去,实际整个vux都被引入进来了。。。好坑
之前我的代码是
import {Blur,Cell,Range,Toast ,Group } from ‘vux‘
结果通过webpack打包后js逼近两兆,实在是太大了。当时考虑是不是因为vue-video-player(封装的video.js组件)影响到了,后来发现打包后的文件居然还有vux其他组件部分的代码
static/js/2.b6c3ae2e.js 1.98 MB 2 [emitted]
那么问题来,怎么解决。直接用最笨的方法引入需要的组件,发现完美的解决了这个问题
import Blur from ‘vux/src/components/blur/index.vue‘ import Cell from ‘vux/src/components/cell/index.vue‘ import Range from ‘vux/src/components/range/index.vue‘ import Toast from ‘vux/src/components/toast/index.vue‘ import Group from ‘vux/src/components/group/index.vue‘
static/js/3.02d7c08f.js 488 kB 3 [emitted]
打包后直接小了一兆多,事实证明还是不要偷懒 ‘(*>﹏<*)′
时间: 2024-11-08 21:45:02