大家好，今天为大家带来一个比较令人困惑的问题，vue项目体积变得越来越大的时候，首页加载速度会变慢的问题，给用户造成大量的空白等待时间的体验是不好的，首先我们要明白为什么会出现这种情况，整个项目在webpack打包的情况下，js会被分为三部分，vendor,app,manifest三个文件，这三个文件为整个项目所依赖的包，初始化一个基本的vue项目本身就需要864kb，如果我们再用一些第三方库，比如echarts，element,那么轻松达到1M是很正常的，首页加载就会耗时，当然这只是一方面，目前我的解决方案有以下几种
一 DNS预解析
<meta http-equiv="x-dns-prefetch-control" content="on" /> content参数的on表示开启预解析，off表示关闭预解析
<link rel="dns-prefetch" href="http://******.com"> href后面追加我们要预解析的域名
二 去除options请求
axios在发送请求的时候，如果判定该请求为复杂请求，会默认先发送option请求确认是否通过，如果通过响应200，则会发送下一个真实请求，所以说呢，其实第一步的option请求就会出现耗时的情况，针对这个情况我们可以做到尽最大可能程度的避免，当然一般来说只要被axios认为是简单的请求，就不会发送option请求，那么哪几种是简单的请求呢 text/plain、multipart/form-data、application/x-www-form-urlencoded，像我们平常设置的application/json请求就会被认为是复杂请求
三 CDN加速
开启cdn加速的原理很简单，就是将我们的依赖包换为最近服务器的线上资源，这样我们就不用打包这些依赖包了，不过这个要根据公司要求吧，如果公司能帮你开cdn加速那是最好的
四 Nginx gzip压缩
一般来说我们通过webpack打包之后的文件其实已经得到了压缩，但是文件还是很大，这个时候如果让运维的同事帮忙配置下Nginx gzip压缩，压缩程度能达到2-3倍，我原先的项目有2-3M最后压缩到800多k,确实快了很多
五 路由动态懒加载
按需加载，重要的事情说三遍，一般来说，我们的路由会统一指向首页，也就是*配的统配路由，这个首页可能又是很多个组件组成的，这个时候如果我们一次性加载所有，会loading很长的时间，我们可以采取路由懒加载，遵循ESmodule,common.js,AMD开发规范，_require()即可
六 代码规范调整
整理前端组内，符合规范的前端开发规范，遵循浏览器内核渲染规则，定期进行代码走查，减少代码的冗余和潜在的问题
七 开启缓存（强缓存，协商缓存，离线缓存）
让运维小哥帮你配置下浏览器缓存时间，一版来说我设置的是七天，七天之内，走缓存
1.单页面应用index.html不做缓存,保证每次更新都是最新的代码块
2.static文件下的静态资源可做强缓存，此资源长期不更新
3.src下的文件，根据应用场景将css,js,img等加入协商缓存，设置max-age,last-modify，ETag，if none match同时配合前端hash值在合理运用缓存的同时给用户带来更好的体验
网友评论