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 相关文章推荐
[原创]用javascript实现检测指定目录是否存在的方法
Jan 12 Javascript
深入理解Javascript闭包 新手版
Dec 28 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 Javascript
js中有关IE版本检测
Jan 04 Javascript
jquery load事件(callback/data)使用方法及注意事项
Feb 06 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
js采用concat和sort将N个数组拼接起来的方法
Jan 21 Javascript
详解handlebars+require基本使用方法
Dec 21 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 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中与数组相关的函数
2007/03/22 PHP
php 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
php数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
PHP输出XML到页面的3种方法详解
2013/06/06 PHP
php过滤敏感词的示例
2014/03/31 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
浅谈javascript的数据类型检测
2010/07/10 Javascript
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
2017/07/28 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
python下10个简单实例代码
2017/11/15 Python
python计算日期之间的放假日期
2018/06/05 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
pyinstaller将含有多个py文件的python程序做成exe
2020/04/29 Python
python 实现有道翻译功能
2021/02/26 Python
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
历史专业学生的自我评价
2014/02/28 职场文书
保险公司开门红口号
2014/06/21 职场文书
银行员工考核评语
2014/12/31 职场文书
长征观后感
2015/06/09 职场文书
Python jiaba库的使用详解
2021/11/23 Python
Java异常体系非正常停止和分类
2022/06/14 Java/Android