浅谈vue加载优化策略


Posted in Javascript onMarch 19, 2019

vue.js是一个比较流行的前端框架,与react.js、angular.js相比来说,vue.js入手曲线更加流畅,不管掌握多少都可以快速上手。但是单页面应用也都有其弊病,有时候首屏加载慢的让人捏舌。今天我们以vue cli3.x来说一说如何行之有效的缓解此问题!

方法一 路由懒加载

首屏加载慢的原因无非就是单页面应用需要加载完整个路由表上的页面,而路由懒加载就是来解决这个问题的。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。下面这个就是vue路由懒加载的一个具体例子。方法很简单,如果您不想深入了解,只需按照这个格式引入路由就可以了。如果您对路由懒加载感兴趣,请移步vue-router路由懒加载

浅谈vue加载优化策略

方法二 组件按需加载

为什么要按需加载组件呢?原因也很简单,一些组件库包含丰富的组件,如果我们直接将其引入,不免会引入一些我们压根用不到的组件。这样打包起来体积会比较大,同样显得我们很不专业。因此按需引入就显得很必要了。我们现在就拿iview组件库为例,了解一下按需引入的流程。

1.首先引入按需加载工具 babel-plugin-import

babel-plugin-import是babel它会在编译过程中将 import 的写法自动转换为按需引入的方式。

npm install babel-plugin-import --save-dev

2.在项目根目录创建.babelrc文件并配置按需加载内容

{
 "plugins": [["import", {
  "libraryName": "iview",
  "libraryDirectory": "src/components"
 }]]
}

3.在main.js配置项目需要加载的组件

下面是iview的一个例子

浅谈vue加载优化策略

这里需要注意全局注册的组件需要挂在到vue原型上,例如我们需要使用Notice组件,那我就需要

Vue.prototype.$Notice = Notice;

这样我们就可以正常的使用iview的组件了。

方法三 使用CDN加速策略

在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,那么vendor.js文件体积将会相当的大,影响首开的体验。解决方法是,将引用的外部js、css文件剥离开来,不编译到vendor.js中,而是用资源的形式引用,这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来,达到加速首开的目的。外部的库文件,就可以使用CDN资源。vue cli3.x在配置cdn是和vue cli2.x有一些区别,vue cli在升级后,代码结构变化比较大,配置文件集成到了vue.config.js文件中。下面以amap、axios和qs为例讲述如何使用cdn加载资源。

1.在index.html中引入相关cdn资源

浅谈vue加载优化策略

2.配置externals

vue cli3.x 配置webpack是在vue.config.js的configureWebpack中

浅谈vue加载优化策略

配置完之后,我们就可以正常使用全局的Amap、axios和Qs了

方法四 使用compression-webpack-plugin将文件打包成gzip格式

compression-webpack-plugin这个依赖在npm run build是会生成.gz文件。之后项目访问的文件就是这个.gz文件,正常的项目打包体积会减少一半还要多,是不是很吊

浅谈vue加载优化策略

下面我们来进一步讲述这个这个依赖的使用流程。

1.npm 引入

npm install compression-webpack-plugin --save-dev

2.vue cli3.x在 vue.config.js配置webpack

浅谈vue加载优化策略

3.nginx开启gzip模式

在上一步前端就已经配置好了,之后就是nginx配合开启gzip模式,这个比较简单,只要你对nginx有一点了解,我们在nginx.conf中的http中配置一些代码

浅谈vue加载优化策略

4.验证是否配置成功

这步就很简单了只需要查看chunk类文件的Response Headers的Content-Encoding是否是gzip即可

浅谈vue加载优化策略

以上就是解决vue首屏加载慢的一些方法,希望文章能帮助大家解决问题谢谢。也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个可以随意添加多个序列的tag函数
Jul 21 Javascript
js图片自动切换效果处理代码
May 07 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
node.JS md5加密中文与php结果不一致的解决方法
May 05 Javascript
vue中引用阿里字体图标的方法
Feb 10 Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
vue实现重置表单信息为空的方法
Sep 29 Javascript
js实现开关灯效果
Mar 30 Javascript
7个你应该知道的JS原生错误类型
Apr 29 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 #Javascript
详解js加减乘除精确计算
Mar 19 #Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 #jQuery
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 #Javascript
vue多层嵌套路由实例分析
Mar 19 #Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 #Javascript
vue项目移动端实现ip输入框问题
Mar 19 #Javascript
You might like
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
Apache2 httpd.conf 中文版
2006/11/17 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
JavaScript Timer实现代码
2010/02/17 Javascript
JavaScript中的字符串操作详解
2013/11/12 Javascript
jQuery判断checkbox是否选中的小例子
2013/12/02 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
npm 下载指定版本的组件方法
2018/05/17 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
vue router的基本使用和配置教程
2018/11/05 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
python实现人人网登录示例分享
2014/01/19 Python
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
tensorflow 大于某个值为1,小于为0的实例
2020/06/30 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
财务整改报告范文
2014/11/05 职场文书
行政处罚告知书
2015/07/01 职场文书
2015党建工作简报
2015/07/21 职场文书
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers
在redisCluster中模糊获取key方式
2021/07/09 Redis