首页 > 代码库 > 使用vux打包文件过大的解决方案

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

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

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

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