使用vux打包文件过大的解决方案

Posted 2020-10-02

　　项目上线了，发现页面加载过慢，追其原因，发现打包后文件也依然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] 

打包后直接小了一兆多，事实证明还是不要偷懒 ‘(*>﹏<*)′