最近开发一套后台管理系统,遇到首页加载很慢的问题,技术栈是 vue全家桶
+ elementUI
+ echarts
。首次加载大概需要50s,页面才能出来。
偶尔快一点的时候
总结如下原因:
原因1:由于vendor.js和app.css较大,UI渲染线程并不会优先加载他俩,但是VUE等主流的单页面框架都是js渲染html body的,所以必须等到vendor.js和app.css加载完成后完整的界面才会显示。
原因2:还有一个原因就是单页面首次会把所有界面和接口都加载出来,会有多次的请求和响应,数据不能马上加载
二者相加所以会有长时间的白屏。
解决方式如下:
vue-router 路由懒加载
路由懒加载写法
- 使用CDN加载
index.html引入cdn
webpack.base.conf.js
- 防止编译文件中出现map文件。
config/index.js
文件中设置productionSourceMap
为false
config/index.js
- 使用gzip压缩
1). 修改config/index.js
文件下productionGzip:true ;
2). 安装依赖npm install --save-dev [email protected]
。(注:这里为啥要指定版本号呢,是因为高版本的依赖会报错,我使用的1.1.11版本是没报错)
- 去掉代码中的console.log
打包之后控制台很干净,部署正式环境之前最好这样做。参考参考的方法,亲测有效
最后来看下打包后的效果吧:
文件还是比较小的
作者:luckyLink
链接:https://www.jianshu.com/p/c4a9a0d4db95
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。