当前位置: 首页 > news >正文

vue优化首屏加载时间优化-cdn引入第三方包

前言

  • 为什么要进行首屏加载优化,因为随着我们静态资源和第三方包和代码增加,压缩之后包会越来越大

  • 随着网络的影响,在我们第一输入url请求资源时候,网络阻塞,加载时间长,用户体验不好

  • 仔细观察后就会发现,代码压缩之后并没有多大,大的都是项目自身,静态资源,第三方包

  • 除去代码层面我们可以通过静态图片网络请求,gzip压缩,CDN(第三方包引入方式),浏览器缓存

什么是cdn引入第三方包-为什么这样干

  • 当我们在本地开发,需要使用到别人的包的时候。通过npm下包。

  • 并且会在package.json文件中,分类好那些包在本地用,那些包需要生产用(会在打包时打进去)

  • 虽然这些包可能并没有那么大,但在小也是占用内存资源,在第一次加载时候需要加载的(受网络影响)

  • cdn就是这些第三方包对应好压缩文件存在服务器,我们只需要通过网络请求就行了(访问服务器资源)

  • 使用cdn之后,我们就可以配置在打包时候不把这些包依赖打到资源里,这样减少打包大小,在服务器压缩,传输更快,同步访问cdn资源包以gzip或者br形式传输,更快减轻服务器压力

  • 但我们使用gzip+cdn之后,一般首屏加载时间就会减少80%左右(不受网络影响前提下)

在哪里获取cdn-第三方包地址

  • 一些成熟框架,就会自己提供cdn地址,比如vue-element-ui。

  • 但是也有网站会把市面上主流的第三方包放在服务器供我们访问

  • bootcdn-主流推荐使用这个:BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

  • jsdelivr也可以用:jsDelivr - A free, fast, and reliable CDN for JS and open source

代码实现

1.在开始之前我们先看一下有波动情况下element.js包要加载多长时间-3.37秒

2.我们怎么判断哪些包需要cdn方式引入

  • 首先element-ui-和vue及相关的全家桶肯定是要通过cdn方式引入的

  • 其次我们通过包分析打包资源来看哪些生产使用的包需要cdn引入

图例

查看打包之后资源文件包大小占比-不需要下载插件-自带

2.1我们在package.json文件/scripts里面配置一条命令

"build:report": "vue-cli-service build --report",

2.2使用命令打包-在打包文件会有一个report.html文件-直接在浏览器打开就可以看见生产资源包占比大小

// 运行打包命令
npm run build:report

3.需要在vue.config.js 配置生产环境标识,需要cdn引入包,配置拒绝把这些cdn引入的包打进资源

  • 此版本以vue全家桶加echarts为例

  • 可以直接复制我的,改你项目里的版本就可以了,也可以直接使用我的测过没问题

  • 注意cdn变量里左边值是package.json里面包名,右边值是使用该包时候的名字

  • router-和element特殊注意看备注

//生产环境标识
const IS_PRODUCTION = process.env.NODE_ENV === 'production'
​
// 配置引用的js,css地址
const cdn = {css: ['https://unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css'],js: ['https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js','https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.9/vue-router.min.js','https://cdn.bootcdn.net/ajax/libs/vuex/3.6.2/vuex.min.js','https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js','https://unpkg.com/element-ui@2.12.0/lib/index.js','https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.min.js',]
}
​
// 配置打包时使用cdn节点,忽略第三方组件包
// 左边值是package.json里面包名
// 右边值是使用该包时候的名字
const externals = {vue: 'Vue',vuex: 'Vuex',axios: 'axios',echarts: 'echarts',// 右边值在router.js中使用时是router(直接写这个名字会报undefined)// 应该写 'VueRouter''vue-router': 'VueRouter',// 右边值在main.js中使用名字是Element(直接写会报错)// 应该写ELEMENT-这个值是一个全局变量-跟main.js中引用名字并没有关系'element-ui': 'ELEMENT'
}
​
​
chainWebpack (config) {// 方便查看-其他默认配置省略// 配置是生产环境时,不包上面包打进去,通过cdn方式引入if (IS_PRODUCTION) {config.plugin('html').tap(args => {args[0].cdn = cdnreturn args})//视为一个外部库,而不将它打包进来config.externals(externals)}}

4.来到public静态文件的-index.html-引入这些资源-可以直接复制

// css资源
<% for (var i inhtmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %><linkhref="<%= htmlWebpackPlugin.options.cdn.css[i] %>"rel="preload"as="style"/><link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" /><% } %>// js资源<% for (var i inhtmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %><script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script><% } %>

图例

5.配置完成之后我们直接打包-丢到nginx启动

5.1当我们配置失败会出现加载不出来,控制台会报错-如果出现下面报错你应该高兴,这些报错都是可以解决的,就差一步

5.2如果配置成功-我们会发现没有报错首屏会很快加载出来,f12检查时在vue.config.js配置地址会看到。在js-css资源查看时都是很快地

5.3使用cdn包加载之后-js静态资源加载时间-压缩传输方式对比


总结:

经过这一趟流程下来相信你也对 vue优化首屏加载时间优化-cdn引入第三方包 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!

什么不足的地方请大家指出谢谢 -- 風过无痕

相关文章:

vue优化首屏加载时间优化-cdn引入第三方包

前言 为什么要进行首屏加载优化&#xff0c;因为随着我们静态资源和第三方包和代码增加&#xff0c;压缩之后包会越来越大 随着网络的影响&#xff0c;在我们第一输入url请求资源时候&#xff0c;网络阻塞&#xff0c;加载时间长&#xff0c;用户体验不好 仔细观察后就会发现…...

lv4 嵌入式开发-3 标准IO的读写

目录 1 标准I/O – 读写流 2 标准I/O – 按字符输入 3 标准I/O – 按字符输出 4 标准I/O – 思考和练习 5 标准I/O – 按行输入 6 标准I/O – 按行输出 7 标准I/O – 思考和练习 1 标准I/O – 读写流 流支持不同的读写方式: 读写一个字符&#xff1a;fgetc()/fputc()一…...

iOS UIDevice设备信息

识别设备和操作系统 //获得共享设备实例 open class var current: UIDevice { get }//识别设备的名称 open var name: String { get } // e.g. "My iPhone"//设备类型 open var model: String { get } // e.g. "iPhone", "iPod touch"//本地化设…...

SLAM ORB-SLAM2(2)编译安装

SLAM ORB-SLAM2(2)编译安装 1. 软件包依赖安装2. 依赖安装2.1. Eigen2.2. Pangolin2.3. OpenCV3. ORB-SLAM23.1. 源码下载3.2. 文件修改3.3. 扩大交换空间3.4. 编译1. 软件包依赖安装 以一个纯净的ubuntu20.04桌面版为例 1.首先设置软件源为清华源 2.安装必要依赖 sudo ap…...

第11节-PhotoShop基础课程-索套工具

文章目录 前言1.索套工具 选中后按Ctrl 可以移动2.加&#xff0c;减&#xff0c;交叉 shift alt 2.多边形索套工具 手动首尾相连 或者双击空地1.单击绘制直线选区2.双击结束绘制3.加&#xff0c;减&#xff0c;交叉4. delete可以删除节点 3.磁性索套工具1.沿着边缘自动吸附2.可…...

Json字符串内容比较-超实用版

背景 之前有类似接口diff对比&#xff0c;数据对比的测试需求&#xff0c;涉及到json格式的数据对比&#xff0c;调研了几个大神们分享的代码&#xff0c;选了一个最符合自己需求的研究了下。 说明 这个对比方法&#xff0c;支持JsonObject和JsonArray类型的数据对比&#x…...

Redis系列之客户端Redisson

概述 官方推荐的客户端&#xff0c;支持Redis单实例、Redis哨兵、Redis Cluster、Redis master-slave等各种部署架构。 GitHub&#xff0c; 功能&#xff1a; 分布式锁 分布式锁 使用Redisson提供的分布式锁的一个最常见场景&#xff0c;应用部署为多个节点&#xff0c;然…...

centos 端口被占用的快速排查方式

问题笔记 centos 端口被占用的快速排查方式 centos 端口被占用的快速排查方式 这里说一个我刚刚遇到的问题&#xff0c;解决步骤用来记录&#xff0c;方便以后自己查询。 nginx配置完index.html测试文件&#xff0c;发现一直显示的404页面。 我跑到服务器上想重启一下nginx …...

Java“牵手”淘宝商品列表数据,关键词搜索淘宝商品数据接口,淘宝API申请指南

淘宝商城是一个网上购物平台&#xff0c;售卖各类商品&#xff0c;包括服装、鞋类、家居用品、美妆产品、电子产品等。要获取淘宝商品列表和商品详情页面数据&#xff0c;您可以通过开放平台的接口或者直接访问淘宝商城的网页来获取商品详情信息。以下是两种常用方法的介绍&…...

OpenEuler/CentOS如何修改密码策略

密码策略文件&#xff1a; /etc/pam.d/system-auth 找到行&#xff1a; password requisite pam_pwquality.so try_first_pass local_users_only 为保证安全&#xff0c;可以将这一行注释掉&#xff0c;添加一行&#xff0c;最后结果如下&#xff1a; #password …...

# Spring MVC与RESTful API:如何设计高效的Web接口

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…...

Scrum敏捷模式的优势点、实践经验及适用企业

Scrum敏捷模式是一种灵活、适应性强的开发方法&#xff0c;其核心理念是以短周期、高频率的方式进行项目开发&#xff0c;确保团队能够快速响应变化。 Scrum包含三个角色&#xff1a;产品负责人&#xff08;Product Owner&#xff09;、Scrum Master和开发团队&#xff08;Tea…...

【C++杂货铺】探索stack和queue的底层实现

文章目录 一、stack的介绍和使用1.1 stack的介绍1.2 stack的使用1.2.1 最小栈1.2.2 栈的压入、弹出序列1.2.3 逆波兰表达式求值1.2.4 用栈实现队列 二、queue的介绍和使用2.1 queue的介绍2.2 queue的使用2.2.1 二叉树的层序遍历 三、模拟实现3.1 stack模拟实现3.2 queue模拟实现…...

“系统的UI”——SystemUI

SystemUI的实现 以StatusBar为例&#xff0c;来分析下Android系统具体是如何实现它们的。 相关代码分为两部分&#xff0c;即&#xff1a; Service部分 代码路径&#xff1a;frameworks/base/services/java/com/android/server。 应用部分 代码路径&#xff1a;frameworks…...

类和对象:构造函数,析构函数与拷贝构造函数

1.类的6个默认成员函数 如果一个类中什么成员都没有&#xff0c;简称为空类。 空类中真的什么都没有吗&#xff1f;并不是&#xff0c;任何类在什么都不写时&#xff0c;编译器会自动生成以下6个默认成员函数。 默认成员函数&#xff1a;用户没有显式实现&#xff0c;编译器…...

谈谈Java的特点和优点以及选择Java的原因

&#xfeff;​ 如果面试官问你&#xff1a;请你说说Java的特点和优点&#xff0c;为什么要选择Java&#xff1f;你该怎么回答&#xff1f; 得分点 Java的特点 Java与C的区别 Java的优点标准回答 Java是一门非常纯粹的面向对象的编程语言&#xff0c;它吸收了C语言的各种优…...

消息队列(MQ)面试

目录 讲一讲MQ 面试官: 在你之前的项目中&#xff0c;你是否使用过消息队列&#xff08;MQ&#xff09;&#xff1f;能详细介绍一下你在项目中如何使用MQ吗&#xff1f; 在用户和用户之间的多对多聊天通信中如何使用&#xff0c;请具体来讲一下。 那你可以讲一下消息的确认…...

无涯教程-JavaScript - COUPNUM函数

描述 COUPNUM函数返回结算日和到期日之间应付的息票数量,四舍五入到最接近的整数。 语法 COUPNUM (settlement, maturity, frequency, [basis])争论 Argument描述Required/OptionalSettlement 证券的结算日期。 证券结算日期是指在发行日期之后将证券交易给买方的日期。 Re…...

上海控安携汽车网络安全新研产品出席AUTOSEMO“恒以致远,共创共赢”主题研讨会

8月31日&#xff0c;AUTOSEMO“恒以致远&#xff0c;共创共赢”主题研讨会在天津成功召开。本次大会由中国汽车工业协会软件分会中国汽车基础软件生态标委会&#xff08;简称&#xff1a;AUTOSEMO&#xff09;与天津市西青区人民政府联合主办。现场汇聚了100余位来自产学研政企…...

小程序引入高德/百度地图坐标系详解

小程序引入高德/百度地图坐标系详解 官网最近更新时间&#xff1a;最后更新时间: 2021年08月17日 高德官网之在原生小程序中使用的常见问题 链接 目前在小程序中使用 高德地图只支持以下功能 &#xff1a;地址描述、POI和实时天气数据 小结&#xff1a;从高德api中获取数…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

linux 错误码总结

1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

关于 WASM:1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

系统掌握PyTorch:图解张量、Autograd、DataLoader、nn.Module与实战模型

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文通过代码驱动的方式&#xff0c;系统讲解PyTorch核心概念和实战技巧&#xff0c;涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...