Vue的打包优化之路
场景分析
一个结构简单,依赖蛮多的可视化项目,用到的库有
1. Vue + VueRouter + Vuex + axios
2. ECharts + 全省份地图文件 + 中国地图文件
3. ElementUI
4. moment (后面被 date-fns 代替)
5. lodash + lodash-decorator (用到了装饰器)
ECharts 的 JSON 地图文件占了很大一部分,大概有 1.96MB,gzip 以后 900KB,这一部分没有办法做处理。ECharts 组件本身可以使用按需加载
接着是依赖的一些公共库,比如 Vue 全家桶,这部分是可以提取到 CDN
最后是一些类似 lodash, moment 的工具库,可能只引用到了部分功能,但是默认会加载全部包,这样是不划算的。lodash, moment 默认都不支持 tree-shaking 因此需要手动按需加载或者使用更小体积的库。
先来看看默认没有经过优化的打包分析。
默认配置
只做了简单异步路由加载,各种库均没有按需引用。
地图JSON文件在体积处理上没有更好的优化办法
默认打包
这