浅谈vue加载优化策略
vue.js是一个比较流行的前端框架,与react.js、angular.js相比来说,vue.js入手曲线更加流畅,不管掌握多少都可以快速上手。但是单页面应用也都有其弊病,有时候首屏加载慢的让人捏舌。今天我们以vue cli3.x来说一说如何行之有效的缓解此问题!
方法一 路由懒加载
首屏加载慢的原因无非就是单页面应用需要加载完整个路由表上的页面,而路由懒加载就是来解决这个问题的。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。下面这个就是vue路由懒加载的一个具体例子。方法很简单,如果您不想深入了解,只需按照这个格式引入路由就可以了。如果您对路由懒加载感兴趣,请移步vue-router路由懒加载
方法二 组件按需加载
为什么要按需加载组件呢?原因也很简单,一些组件库包含丰富的组件,如果我们直接将其引入,不免会引入一些我们压根用不到的组件。这样打包起来体积会比较大,同样显得我们很不专业。因此按需引入就显得很必要了。我们现在就拿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原型上,例如我们需要使用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资源
2.配置externals
vue cli3.x 配置webpack是在vue.config.js的configureWebpack中
配置完之后,我们就可以正常使用全局的Amap、axios和Qs了
方法四 使用compression-webpack-plugin将文件打包成gzip格式
compression-webpack-plugin这个依赖在npm run build是会生成.gz文件。之后项目访问的文件就是这个.gz文件,正常的项目打包体积会减少一半还要多,是不是很吊
下面我们来进一步讲述这个这个依赖的使用流程。
1.npm 引入
npm install compression-webpack-plugin --save-dev
2.vue cli3.x在 vue.config.js配置webpack
3.nginx开启gzip模式
在上一步前端就已经配置好了,之后就是nginx配合开启gzip模式,这个比较简单,只要你对nginx有一点了解,我们在nginx.conf中的http中配置一些代码
4.验证是否配置成功
这步就很简单了只需要查看chunk类文件的Response Headers的Content-Encoding是否是gzip即可
以上就是解决vue首屏加载慢的一些方法,希望文章能帮助大家解决问题谢谢。也希望大家多多支持脚本之家。
- 虎嗅主站盲打成功(已进后台)
- 我的第五个网页制作:pre、html转义、abbr标签的使用
- UVALive 3882 - And Then There Was One【约瑟夫问题】
- 超级账本项目:链码示例
- 我的第六个网页制作:table标签
- POJ 1163 The Triangle【dp+杨辉三角加强版(递归)】
- UVA 11039-Building designing【贪心+绝对值排序】 UVA11039-Building designing
- UVA 11636-Hello World!(水题,猜结论) UVA11636-Hello World!
- 百度某SDK设计缺陷导致手机敏感信息泄露(IMEI号和地理位置信息等)
- HDU 1004 Let the Balloon Rise【STL<map>】
- UVA 10881 - Piotr's Ants【模拟+思维】
- DFS中的奇偶剪枝学习笔记
- POJ 3154 Graveyard【多解,数论,贪心】
- HDU 1010 Tempter of the Bone【DFS经典题+奇偶剪枝详解】
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- CICD实战——服务自动测试
- MySQL 案例:left join 与 BUG
- WordPress缩略图出现A TimThumb error has occured解决办法
- 2020-09-30:谈谈内存对齐。
- leetcode树之对称二叉树
- 【网络技术联盟站】网络安全 | 瑞哥带你全方位解读防火墙技术!
- 腾讯云服务器CVM+CentOS,部署LAMP环境快速搭建WordPress博客
- leetcode栈之有效的括号
- JSON Web Token 的结构是什么
- codeforces 1429E(dp)
- Linux Ubuntu 安装 Fish Shell 教程以及配置和使用方法
- 2020-10-02:golang如何写一个插件?
- Kubernetes 1.19.0——健康性检查
- leetcode栈之用两个栈实现队列
- Ui Automator 框架和Ui Automator Viewer你会用吗?附送「必备adb命令」拿走不谢 !