前言

最近利用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里继续深耕。。。

作者: 一蓑烟雨

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

分类: Vue.js
posted 阅读(221 ) 评论(1 )

评论内容: