本项目意在通过不同的分支展示不同的优化方式,对
vue
项目性能的影响,探索vue
开发中有显著效果的可行性优化方案(尽可能不改动业务代码)。你可以切换分支,查看git
历史,通过比对文件变化,来了解实现的具体细节。
VUE CLI 3
的优化配置请移步这里
通过vue-cli@2
生成,只包含最基础的Vue
三件套 ———— vue
、vue-router
、vuex
以及常用的element-ui
和axios
,且只进行简单的使用。直接build
,不做任何优化处理,作为参考系。
app.css
: 压缩合并后的样式文件。app.js
:主要包含项目中的App.vue
、main.js
、router
、store
等基础代码。vendor.js
:主要包含项目依赖的诸如vuex
,axios
等第三方库的源码,这也是为什么这个文件如此之大的原因,下一步将探索如何优化这一块,毕竟随着项目的开发,依赖的库也能会越来越多。数字.js
:以0、1、2、3等数字开头的js
文件,这些文件是各个路由切分出的代码块,因为我拆分了两个路由,并做了路由懒加载,所以出现了0和1两个js
文件。mainfest.js
:mainfest
的英文有清单、名单的意思,该文件包含了加载和处理路由模块的逻辑
可以看到未经优化的base
版本在Fast 3G
的网络下大概需要7秒多的时间才加载完毕