详解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 相关文章推荐
JavaScript类和继承 prototype属性
Sep 03 Javascript
js实现上传图片之上传前预览图片
Mar 25 Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
node.js中的querystring.stringify方法使用说明
Dec 10 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
js图片跟随鼠标移动代码
Nov 26 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
微信小程序实现拼图小游戏
Oct 22 Javascript
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
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
Cookie 小记
2010/04/01 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
微信小程序组件生命周期的踩坑记录
2021/03/03 Javascript
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
Python NumPy库安装使用笔记
2015/05/18 Python
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
有趣的python小程序分享
2017/12/05 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
Python通过matplotlib画双层饼图及环形图简单示例
2017/12/15 Python
python实现猜数字游戏
2020/03/25 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
结构和类有什么异同
2012/07/16 面试题
测试时代收集的软件测试面试题
2013/09/25 面试题
护理学毕业生自荐信
2013/10/02 职场文书
综合测评自我鉴定
2013/10/08 职场文书
2014年村委会工作总结
2014/11/24 职场文书
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技
Golang gRPC HTTP协议转换示例
2022/06/16 Golang