Vue如何提升首屏加载速度实例解析


Posted in Javascript onJune 25, 2020

在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏的体验。

这是优化前的页面加载状态:执行npm run build打包项目,出来的vendeor.js文件,基本都是1M以上的的巨大文件,没有用户能忍受5s以上的loading而不关闭页面的,如图所示:

Vue如何提升首屏加载速度实例解析

当项目在挂载到服务器上,平均都是10S以上加载出来,好家伙这加载时间,仿佛过了半个世纪,很烦人,心态boom, 开发者甚至都有种想砸电脑的冲动(·#*@#¥……&*)!

我们先来分析下前端加载速度慢原因

1. 首先安装webpack的可视化资源分析工具,命令行执行:

npm i webpack-bundle-analyzer -D

2. 然后在webpack的dev开发模式配置中,引入插件,代码如下:

const BundleAnalyzerPlugin = require('webpack-bundle-plugin').BundleAnalyzerPlugin
plugins: [
  new BundleAnalyzerPlugin()
]

3. 最后命令行执行npm run build --report, 浏览器会自动打开分析结果,如下所示:

Vue如何提升首屏加载速度实例解析

可以看到vue全家桶相关依赖占用了很大的空间,对webpack的构建速度和网站加载速度都会有比较大的影响。单页应用会随着项目越大,导致首屏加载速度很慢,针对目前所暴露出来的问题,有以下几种优化方案可以参考:

有针对性的优化方案

一、对于第三方js库的优化,分离打包

生产环境是内网的话,就把资源放内网,通过静态文件引入,会比node_modules和外网CDN的打包加载快很多。如果有外网的话,可以通过CDN方式引入,因为不用占用访问外网的带宽,不仅可以为您节省流量,还能通过CDN加速,获得更快的访问速度。但是要注意下,如果你引用的CDN 资源存在于第三方服务器,在安全性上并不完全可控。

目前采用引入依赖包生产环境的js文件方式加载,直接通过window可以访问暴露出的全局变量,不必通过import引入,Vue.use去注册

在webpack的dev开发配置文件中, 加入如下参数,可以分离打包第三方资源包,key为依赖包名称,value是源码抛出来的全局变量。如下图所示,可以看到打包后vue相关资源包已经排除在外了。对于一些其他的工具库,尽量采用按需引入的方式。

externals: {
  vue: 'Vue',
  vuex: 'Vuex',
  'vue-router': 'VueRouter',
  axios: 'axios',
  'element-ui': 'ELEMENT'

Vue如何提升首屏加载速度实例解析

二、vue-router使用懒加载

在访问到当前页面才会加载相关的资源,异步方式分模块加载文件,默认的文件名是随机的id。如果在output中配置了chunkFilename,可以在component中添加WebpackChunkName,是为了方便调试,在页面加载时候,会显示加载的对应文件名+hash值,如下图:

{
  path: '/Login',
  name: 'Login',
  component: () = >import( /* webpackChunkName: "Login" */ '@/view/Login')
}

Vue如何提升首屏加载速度实例解析

三、图片资源的压缩,icon资源使用雪碧图

严格说来这一步不算在编码技术范围内,但是却对页面的加载速度影响很大。对于所有的图片文件,都可以在一个叫tinypng的网站上去压缩一下。网址:tinypng.com/,对页面上使用到的icon,可以使用在线字体图标,或者雪碧图,将众多小图标合并到同一张图上,用以减轻http请求压力。然后通过操作CSS的background属性,控制背景的位置以及大小,来展示需要的部分。

四、开启gizp压缩

gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩,可以减小60%以上的体积。前端配置gzip压缩,并且服务端使用nginx开启gzip,用来减小网络传输的流量大小。

命令行执行:npm i compression-webpack-plugin -D

在webpack的dev开发配置文件中加入如下代码:

const CompressionWebpackPlugin = require('compression-webpack-plugin')
plugins: [
  new CompressionWebpackPlugin()

启用gzip压缩打包之后,会变成下面这样,自动生成gz包。目前大部分主流浏览器客户端都是支持gzip的,就算小部分非主流浏览器不支持也不用担心,不支持gzip格式文件的会默认访问源文件的,所以不要配置清除源文件。

Vue如何提升首屏加载速度实例解析

配置好之后,打开浏览器访问线上,F12查看控制台,如果该文件资源的响应头里显示有Content-Encoding: gzip,表示浏览器支持并且启用了Gzip压缩的资源

Vue如何提升首屏加载速度实例解析

Vue如何提升首屏加载速度实例解析

五、webpack相关配置优化

(1)使用uglifyjs-webpack-plugin插件代替webpack自带UglifyJsPlugin插件来压缩JS文件;生产环境关闭源码映射,一方面能减少代码包的大小,另一方面也有利于系统代码安全;清除打印日志和debugger信息;配置SplitChunks 抽取公有代码,提升你的应用的性能

(2)使用mini-xss-extract-plugin提取CSS 到单独的文件, 并使用optimize-css-assets-webpack-plugin来压缩CSS文件 。

六、前端页面代码层面的优化

(1)合理使用v-if和v-show

(2)合理使用watch和computed

(3)使用v-for必须添加key, 最好为唯一id, 避免使用index, 且在同一个标签上,v-for不要和v-if同时使用

(4)定时器的销毁。可以在beforeDestroy()生命周期内执行销毁事件;也可以使用$once这个事件侦听器,在定义定时器事件的位置来清除定时器。详细见vue官网

最终优化后的效果如下图:vendor.js文件从1M以上优化到256K左右,体积减少接近80%,排除服务器影响的因素,界面渲染速度基本都在1s左右,达到秒开效果,比之前快了太多,体验一下就上来了嘻嘻。

Vue如何提升首屏加载速度实例解析

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

Javascript 相关文章推荐
JS类中定义原型方法的两种实现的区别
Mar 08 Javascript
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
AngularJS封装$http.post()实例详解
May 06 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
JavaScript 中的六种循环方法
Jan 06 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
Jan 29 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 #Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 #Javascript
viewer.js实现图片预览功能
Jun 24 #Javascript
Javascript实现鼠标移入方向感知
Jun 24 #Javascript
javascript实现前端input密码输入强度验证
Jun 24 #Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 #Javascript
jQuery实时统计输入框字数及限制
Jun 24 #jQuery
You might like
PHP函数extension_loaded()用法实例
2015/01/19 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
img的onload的另类用法
2008/01/10 Javascript
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
vue自定义表单生成器form-create使用详解
2019/07/19 Javascript
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
Python内建函数之raw_input()与input()代码解析
2017/10/26 Python
python正则实现提取电话功能
2018/02/24 Python
目前最全的python的就业方向
2018/06/05 Python
python实现京东秒杀功能
2018/07/30 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
10个python3常用排序算法详细说明与实例(快速排序,冒泡排序,桶排序,基数排序,堆排序,希尔排序,归并排序,计数排序)
2020/03/17 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
8种常用的Python工具
2020/08/05 Python
python regex库实例用法总结
2021/01/03 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
生日邀请函范文
2014/01/13 职场文书
党课知识竞赛主持词
2014/04/01 职场文书
超市商业计划书
2014/05/04 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
个人欠款协议书范本2014
2014/11/02 职场文书
技术员岗位职责范本
2015/04/11 职场文书
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers
Ruby处理CSV数据方法详解
2022/04/18 Ruby
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript