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 相关文章推荐
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
Jan 15 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
Oct 25 Javascript
Bootstrap3多级下拉菜单
Feb 24 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 Javascript
vue下使用nginx刷新页面404的问题解决
Aug 02 Javascript
vue中配置scss全局变量的步骤
Dec 28 Vue.js
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 define()函数以及defined()函数的用法详解
2013/06/05 PHP
curl实现站外采集的方法和技巧
2014/01/31 PHP
PHP错误Warning: Cannot modify header information - headers already sent by解决方法
2014/09/27 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
php头像上传预览实例代码
2017/05/02 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
jQuery基于扩展简单实现倒计时功能的方法
2016/05/14 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
微信小程序模板template简单用法示例
2018/12/04 Javascript
js实现随机8位验证码
2020/07/24 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
pandas DataFrame索引行列的实现
2019/06/04 Python
jupyter实现重新加载模块
2020/04/16 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
美国在线轮胎零售商:SimpleTire
2019/04/08 全球购物
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
员工自我工作评价
2015/03/06 职场文书
党纪处分决定书
2015/06/24 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
springboot读取resources下文件的方式详解
2022/06/21 Java/Android