Vue的打包优化之路

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文件在体积处理上没有更好的优化办法

默认打包

这里可以看到 ECharts 库占了很大一部分，然后是 moment ElementUI 这些库。