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

前沿

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

 

项目目录结构

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

 

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

给项目瘦身

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

 

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

 

结语

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

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