vue项目打包过大,vue打包优化

描述

自己写了个vue2.0的项目,vue使用vue-router, ui使用iview,起初都是靠webpack引入,打完包五兆多,放在服务器上请求达到五秒

vue项目打包过大,vue打包优化

 

vendor文件过大,是因为很多引来webpack都引入了,所以需要瘦身,在网上看了个博客(https://juejin.im/post/5ce750ce518825335847f6ad),自己试了一下,效果还可以。

操作步骤

0.移除依赖 

npm uninstall moment axios vuex vue-router

1.main.js 将ivew的引入去除 

vue项目打包过大,vue打包优化

2.index.html中引入cdn

vue项目打包过大,vue打包优化

打完包,上传服务器发现真的少了很多。。。由5mb 到 92kb 

请求时间从五秒到三秒 

vue项目打包过大,vue打包优化

 

总结:

本次采用cdn引入算是优化大小很成功 5mb 到 90kb,访问时间 5s 到 3s 也缩小了。

虽然第一次加载还是三秒,比较慢时间花在ivieui和 vuejs上,后续准备把这些文件下载下来放在自己的服务器上,相比会快一些文件才100kb,有可能电脑网速不好