关于vue.js项目的一点优化

前沿

最近利用node+vue+mongodb开发完成了一个个人博客网站,部署部署到服务器上后,开始访问非常慢,需要7~9s的时间,无法忍受,所以将着手对项目进行一点优化尝试。通过对build后的打包文件发现,vendor.js文件竟然有1点几兆,导致浏览器加载十分缓慢,而且我的服务器配置也不是很高。

关于vue.js项目的一点优化_第1张图片

 

项目目录结构

首先先对项目的整体结构做一下梳理,清楚每一个文件都是做什么用的,如下图:

关于vue.js项目的一点优化_第2张图片

 

在开始学习利用vue+node+mongodb进行项目实战时,由于不太懂,所以参考了很多资料,看到网上有用到什么库文件,我也就尝试去使用,导致整个项目引入了很多无用的库,体积就变得臃肿不堪,所以本次优化重点是针对引入的库进行优化。

关于vue.js项目的一点优化_第3张图片

给项目瘦身

经过尝试,删除几个可以不用的库文件,再次build后,vendor.js的体积就只有一百多k了,博客打开的速度也明显提上来了,比如其中moment.js库,我用自定义的时间格式转换的js方法来替代,这个moment在build时就占了好几百K,所以果断放弃使用。具体如下图所示:

 

对于已经引入的库如何删除呢?我的做法是:首先删除package.json文件中的dependency节点中的不用的库,同时找到node_modules下对应的包文件,一并删除,最后在执行一遍 npm install 就可以了:

关于vue.js项目的一点优化_第4张图片

 

结语

这只是项目优化的第一步,后续还会做一些其他方面的优化尝试,比如缓存等,同时我也会vue里继续深耕。。。

网站的原文来自:http://www.dupengnet.com/detail/5a0e5f668c9dcb0b48ef607b

你可能感兴趣的:(vue.js)