详解vue页面首次加载缓慢原因及解决方案


Posted in Javascript onNovember 06, 2019

第一次打包vue的项目部署到服务器下时,发现初次加载特别的缓慢,将近20s页面才加载出来,完全没有开发环境上的那么流畅。主要原因是页面在打包后如果不进行相关配置会导致资源文件特别的大,一次想要全部加载完成会特别的耗时。这里简单总结一下自己用到的一些优化的方案。

首先我们可以安装webpack-bundle-analyzer 插件,通过这个插件我们可以在打包的时候看到打包文件的大小,可以明显的看出哪些文件比较大。

解决方案一

1,去掉编译文件中map文件。在编译好后,我们会看到文件夹下有特别多的.map文件,这些文件主要是帮助我们线上调试代码,查看样式。所以为了避免部署包过大,通常都不生成这些文件。

在 config/index.js 文件中将productionSourceMap 的值设置为false. 再次打包就可以看到项目文件中已经没有map文件 (文件大小 35MB-->10.5MB)

2,vue-router 路由懒加载

懒加载即组件的延迟加载,通常vue的页面在运行后进入都会有一个默认的页面,而其他页面只有在点击后才需要加载出来。使用懒加载可以将页面中的资源划分为多份,从而减少第一次加载的时候耗时。

懒加载路由配置:

详解vue页面首次加载缓慢原因及解决方案

非懒加载路由配置:

详解vue页面首次加载缓慢原因及解决方案

如图所示为通过懒加载后打包的js文件。而非懒加载的打包后一般只有一个app.js 文件。

详解vue页面首次加载缓慢原因及解决方案

解决方案二

使用CDN减小代码体积加快请求速度

1. 为什么使用CDN

使用CDN主要解决两个问题:

  • 打包时间太长、打包后代码体积太大,请求慢
  • 服务器网络不稳带宽不高,使用cdn可以回避服务器带宽问题

2. 具体步骤

1.在/index.html中引入CDN

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vue-manage-system</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

    <script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css" rel="external nofollow" >
    <script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>


  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

注意:修改配置后还是提示Element未定义,是因为Element依赖Vue,vue.js需要在element-ui之前引入,所以vue.js也要改为cnd的引入方式.

2.修改/build/webpack.base.conf.js中修改配置。给module.exports添加externals属性(详见https://webpack.docschina.org/configuration/externals/),其中键是项目中引用的,值是所引用资源的名字。需要注意的是资源名需要查看所引用的JS源码,查看其中的全局变量是什么,例如element-ui的全局变量就说ELEMENT

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
   app: './src/main.js'
  },
  externals: {
   'vue': 'Vue',
   'vue-router': 'VueRouter',
   'ElementUI': 'ELEMENT',
   'axios': 'axios',
  }
 }

3.删除原先的import

如果不删除原先的import,项目还是会从node_modules中引入资源。
也就是说不删的话,npm run build时候仍会将引用的资源一起打包,生成文件会大不少。所以我认为还是删了好。

如:

详解vue页面首次加载缓慢原因及解决方案

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
实现复选框全选/全不选切换
Dec 23 Javascript
js监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
JavaScript encodeURI 和encodeURIComponent
Dec 04 Javascript
Javascript中的几种继承方式对比分析
Mar 22 Javascript
JS实现的按钮点击颜色切换功能示例
Oct 19 Javascript
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
electron 安装,调试,打包的具体使用
Nov 06 #Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 #Javascript
在vue中阻止浏览器后退的实例
Nov 06 #Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 #Javascript
vue项目强制清除页面缓存的例子
Nov 06 #Javascript
关于vue路由缓存清除在main.js中的设置
Nov 06 #Javascript
JS实现随机抽取三人
Nov 06 #Javascript
You might like
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
PHP base64+gzinflate压缩编码和解码代码
2008/10/03 PHP
用PHP ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
AngularJS中transclude用法详解
2016/11/03 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
jQuery实现轮播图及其原理详解
2020/04/12 jQuery
node实现爬虫的几种简易方式
2019/08/22 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
谈谈Python中的while循环语句
2019/03/10 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
佳能德国网上商店:Canon德国
2017/03/18 全球购物
学习考察心得体会
2014/09/04 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
党员转正介绍人意见
2015/06/03 职场文书
投诉信范文
2015/07/02 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
left join、inner join、right join的区别
2021/04/05 MySQL
Nginx反向代理学习实例教程
2021/10/24 Servers