浅谈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 相关文章推荐
javascript css styleFloat和cssFloat
Mar 15 Javascript
javascript中万恶的function实例分析
May 25 Javascript
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 Javascript
Angular 2.0+ 的数据绑定的实现示例
Aug 09 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
详解JavaScript的变量
Apr 04 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
php基础知识:类与对象(5) static
2006/12/13 PHP
php打造属于自己的MVC框架
2012/03/07 PHP
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
PHP 解决session死锁的方法
2013/06/20 PHP
浅谈php的优缺点
2015/07/14 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
javascript 对象的定义方法
2007/01/10 Javascript
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
2016/05/07 Javascript
深入理解MVC中的时间js格式化
2016/05/19 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
连接Python程序与MySQL的教程
2015/04/29 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
python中urlparse模块介绍与使用示例
2017/11/19 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
解读python logging模块的使用方法
2018/04/17 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
如何在django中运行scrapy框架
2020/04/22 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
连锁酒店店长职责范本
2014/02/13 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
python中redis包操作数据库的教程
2022/04/19 Python
实现GO语言对数组切片去重
2022/04/20 Golang