详解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 switch case 另类写法
Mar 14 Javascript
javascript中的作用域scope介绍
Dec 28 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 Javascript
js监听html页面的上下滚动事件方法
Sep 11 Javascript
JavaScript创建对象的四种常用模式实例分析
Jan 11 Javascript
JS合并两个数组的3种方法详解
Oct 24 Javascript
这样回答继承可能面试官更满意
Dec 10 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 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
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
PHP开发微信支付的代码分享
2014/05/25 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
PHP队列用法实例
2014/11/05 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
JavaScript 三种创建对象的方法
2009/10/16 Javascript
jsp+javascript打造级连菜单的实例代码
2013/06/14 Javascript
js读取配置文件自写
2014/02/11 Javascript
javascript适合移动端的日期时间拾取器
2015/11/10 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
深入浅出学习python装饰器
2017/09/29 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
Html5元素及基本语法详解
2016/08/02 HTML / CSS
什么是事务?为什么需要事务?
2012/01/09 面试题
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
会计专业推荐信
2013/10/29 职场文书
模范家庭事迹材料
2014/02/10 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
作风转变年心得体会
2014/10/22 职场文书
2014年药房工作总结
2014/11/22 职场文书
教师学期末个人总结
2015/02/13 职场文书
英雄儿女观后感
2015/06/09 职场文书
雷锋之歌观后感
2015/06/10 职场文书
初一语文教学反思
2016/03/03 职场文书
vue css 相对路径导入问题级踩坑记录
2022/06/05 Vue.js