webpack 预加载资源

1 效果图对比

preload.js就是我们预加载的资源

1.1什么情况下使用预加载

比如:是用户点击按钮时才加载这个资源的,如果资源体积很大,那么用户会感觉到明显卡顿效果 要优化这种情况,可以使用preload和prefetch技术

1.2 

2.什么是preload和prefetch

Preload和Prefetch是两种优化前端性能的技术,它们可以让浏览器在某些条件下提前加载一些资源,从而加快应用程序的加载速度。

Preload指的是在页面加载时预加载一些关键资源,这些资源在接下来的页面操作中会立即用到。Preload可以使用rel="preload"属性来实现,比如:

<link rel="preload" href="path/to/resource" as="type"/>

其中,

 href 表示需要预加载的资源路径
 as属性 指定预加载资源的类型有“script’ /‘style’/ "font"
相比之下,Prefetch是在页面加载后不紧急需要但将来可能需要使用的资源进行预加载。Prefetch的实现方式是通过添加rel="prefetch"属性来实现,例如:

<link rel="prefetch" href="path/to/resource"/>

 下面是一个Preload例子,假设我们有一个应用程序需要用到moment.js库,我们可以将moment.js资源进行预加载:

这里我们是手动注入方式

<head>
  <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js" as="script" />
</head>
 

 3.webpack的方式配置预加载

下载:

npm install --save-dev preload-webpack-plugin

 webpack配置:

const PreloadWebpackPlugin = require('preload-webpack-plugin');
 
module.exports = {
  entry: {

    app: './src/main.js',

    preload: './src/test.js'  //定义需要预加载的文件

  },
  plugins: [
    // ... 其他插件
    new PreloadWebpackPlugin({
      rel: 'preload',
      include: ['preload'] // 可以是 'initial', 'async', 'all', 或者指定 chunk 名称的数组
    }),
  ],
  // ... 其他webpack配置
};

PreloadWebpackPlugin 还提供了其他配置选项,如 fileBlacklistfileWhitelistpriority用于控制哪些文件会被添加到 preload 标签中,以及哪些文件会被排除

new PreloadWebpackPlugin({
  rel: 'preload',
  include: 'allChunks',
  fileWhitelist: [/\.css$/, /\.js$/],
  priority: 'low' // 可以是 'low', 'medium', 'high' 或者一个正整数值
})
//我们将优先级设置为 "low",这意味着被预加载的资源将被赋予较低的优先级。你也可以将优先级设置为 "medium" 或 "high",以指定更高的优先级

开始打包 npm run build 打包成功后查看index,html文件已自动添加到index.html中

 

3.深入理解如何优雅的控制网页请求的优先级 

对于一个网页的性能和体验来讲,控制好请求发起的优先级是非常重要的,网络带宽是有限的,优先去加载重要的资源,让次要的资源延后,就可以让我们的网站体验提升一个台阶。

浏览器本身非常擅长确定网页资源请求的优先级,而且大多数情况下也做的挺好的。但我们肯定还是会遇到一些特殊的优先级控制需求,Priority Hints可以轻松的帮助我们主动控制网站请求加载的优先级。

3.1浏览器默认预加载资源的优先级

现代浏览器有一种受到光房支持的方式来提前获取当前页面最终需要的资源:<link rel="preload" ... />。当我们将它放置在 HTML 的 <head>中时,浏览器将被指示以 “高” 优先级尽快开始下载它。

浏览器中的预加载扫描器已经非常擅长此类事情了,所以,预加载通常最适合用于后来发现的资源 - 任何未由 HTML直接加载的资源,例如通过内联样式属性加载的背景图像。但它对于浏览器可能没有按照你想要的优先顺序排列的任何其他内容也很有用。

举个例子:默认情况下,Chrome会加载具有非常高优先级的字体,但如果某个用户的网络连接速度较慢,它会使用后备字体并降低优先级。

我们通过 CSS @font-face规则加载的字体:

@font-face{

font-family: "Inter Variable";

src: url("./font.woff2") format("woff2");

}

加载时,由于网速较慢,这个字体的下载优先级最低,尽管它对于页面的视觉体验非常重要。

 

我们使用预加载来优先加载字体文件 

<head>

<!-- Other stuff... -->

<linkrel="preload"href="/font.woff2"as="font">

</head>

 

3.2请求的优先级我们可以通过代码做控制

3.3 img 资源的优先级

在默认情况下,无需我们做任何特殊的事情,浏览器就会自动确定页面上最重要的图像。

比如我们来看下面的例子,有三个垂直排列的图片,并且距离非常远:

  <img src="./c.jpg" />

  <div style="height: 1700px"></div>

  <img src="./y.jpg" />

  <div style="height: 1700px"> </div>

  <img src="./t.png" />

当刚开始下载时,所有三个都是 “Medium” 优先级: 

 再次刷新页面可以看到c.jpg的优化级提高成High说明浏览器已经知道c.jpg会最新出现在我们的视口范围中,

 做为开发人员我们肯定知道那一张图片会首先出现,为了提高性能我们主动提高优先级使用 fetchpriority="high"

顺便说一下,这个功能与图像的懒加载机制非常匹配,目前得到了很好支持 

  <img src="./c.jpg" fetchpriority="high" />

  <div style="height: 1700px"></div>

  <img src="./y.jpg" fetchpriority="low" loading="lazy" />

  <div style="height: 1700px"> </div>

  <img src="./t.png" fetchpriority="low" />

 3.4脚本的优先级 

页面上任何带有 src属性的普通 < />都会拥有比较高的优先级,但有一个需要权衡的事情:它们会阻止对页面其余部分的解析,直到加载并执行完成为止。

因此,我们可能会使用到 async属性,它会在后台以低优先级请求脚本,并在准备就绪后立即执行。我们来看下面的例子:

async脚本会降低优先级:控制台确认,在异步脚本加载的过程中,允许后续脚本解析和执行。

  <script src="data.js" async="console.log('async')"></script>

  <script src="test1.js" async="console.log('sync')"></script>

  <script src="moment.js" async="console.log('inline')"></script>

 场景:

但是,如果我们又希望脚本异步下载,也希望脚本拥有 “High” 优先级呢。

一个可能的场景是将一个小型 SPA嵌入到一个落地页的主要内容中。为了保持页面的 Core Web Vitals,特别是 LCP(最大内容绘制时间)和 FID(首次输入延迟),你需要将该脚本设置为高优先级(毕竟,它负责构建和驱动你的应用程序)。但与此同时,你不希望它阻碍页面的其余部分进行解析。

所以,让我们给它一个 fetchpriority:

 <script src="data.js" async="console.log('async')" fetchpriority="high"></script>

  <script src="test1.js" async="console.log('sync')"></script>

  <script src="moment.js" async="console.log('inline')"></script>

 

 3.4.总结

fetchpriority也千万不要过度使用,因为加的多了就等于什么都没加,甚至会导致网页的性能下降。

把 fetchpriority添加到那些浏览器推断的不好,并且你有明确优先级要求的元素上,对网页的加载体验还是会很大的!

 预加载会影响 Largest Contentful Paint(最大内容绘制) 和 Cumulative Layout Shift(累积布局偏移)。在某些情况下,影响可能是负面的。我们建议使用预加载请求进行试验,但一定要前后仔细测试

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/23769.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Navicat修改数据库主键

在MySQL数据库&#xff0c;主键ID默认自增&#xff08;最大的数字自增&#xff09;&#xff0c;但是&#xff0c;在某些情况下&#xff0c;我们想将其从头开始………… 借助Navicat修改数据库主键即可&#xff01; 1. 找到数据库&#xff0c;点击需要更改的表&#xff1a;点击…

经典算法 - 回溯法

文章目录 1. 基本概念2. 组合问题3. 组合总和Ⅲ4. 电话号码的字母组合5. 分割回文串6. 复原IP地址7. 子集8. 全排列9. 全排列Ⅱ10. N皇后11. 解数独 1. 基本概念 递归和回溯相辅相成。只要有递归&#xff0c;就会有回溯。 回溯法是一种纯暴力的搜索&#xff0c;并不是一种高效…

uniapp在自定义tabbar上动态修改svg图标颜色和字体颜色

需求&#xff1a;在uniapp项目内&#xff0c;自定义tabbar&#xff0c;需要将图标更换成svg格式&#xff0c;可动态修改图标及字体颜色。 效果图如下&#xff1a; 我使用的是uniapp结合uview2的组件使用&#xff0c;代码如下&#xff1a; <u-tabbar :value"currentIn…

Spring-Security(二)OAuth2认证详解(持续更新)

Spring Security & Oauth2系列&#xff1a; Spring Security&#xff08;一&#xff09; 源码分析及认证流程 Spring Security&#xff08;二&#xff09;OAuth2认证详解及自定义异常处理 文章目录 1、OAuth2.0 简介1.1 OAuth2.0 相关名词解释1.2 四种授权模式 1.3 、OAu…

大型零售企业总部到分公司数据发放,有没有更优化的方案?

大型零售企业在市场经济中扮演重要角色&#xff0c;是保证基础商品生产、流通和供给的重要一环。随着企业发展&#xff0c;很多大型零售企业都会在全国、乃至全球各地开设分公司&#xff0c;用以降低生产和运营成本&#xff0c;更好地提供本地化服务。 为了保证总部与分公司间信…

Linux环境---在线安装jdk

Linux环境—在线安装jdk 一、使用步骤 1.安装环境 JDK版本&#xff1a;1.8 1.1 建立存放软件的目录 注意&#xff1a;此处本人是将需要按照的软件存放在directory目录下&#xff0c;可根据实际情况调整接收路径。 命令如下&#xff1a; mkdir directory2.安装jdk 2.1 建…

解决Spark流处理产生的小文件问题

做流批一体&#xff0c;湖仓一体的大数据架构&#xff0c;常见的做法就是&#xff1a; 数据源->spark Streaming->ODS&#xff08;数据湖&#xff09;->spark streaming->DWD&#xff08;数据湖&#xff09;->... 那么数据源->spark Streaming->ODS&…

【Selenium+java环境配置】(超详细教程常见问题解决)

Seleniumjava环境配置 windows电脑环境搭建-chrome浏览器1. 下载chrome浏览器2. 查看chrome浏览器版本3. 下载chrome浏览器驱动4.配置系统环境变量PATH 验证环境是否搭建成功1. 创建java项目&#xff0c;添加pom文件中添加依赖2. 编写代码运行 常见问题&解决办法1.访问失败…

移动端 UI 风格,魅力无限

移动端 UI 风格&#xff0c;打造极致体验

Django分页

1、在视图函数文件中引入‘分页器’ from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger 2、给原来的罗列信息函数&#xff0c;添加分页功能&#xff0c;即按照页码&#xff0c;只返回部分信息。 login_required def article_list(request):article…

【因果推断python】21_匹配2

目录 匹配估计器 匹配估计器 子分类估计器在实践中用得不多&#xff08;我们很快就会明白为什么&#xff0c;主要是因为维度诅咒这个原因&#xff09;&#xff0c;但它让我们很好地、直观地了解了因果推理估计器应该做什么&#xff0c;以及它应该如何控制混淆因素。这使我们能…

Yuan 2.0-M32 是一个基于 Yuan 2.0 架构的双语混合专家 (MoE) 语言模型,旨在以更少的参数和计算量实现更高的准确率

主要创新点&#xff1a; 注意力路由器 (Attention Router): 提出了一种新的路由器网络&#xff0c;考虑了专家之间的相关性&#xff0c;从而提高了模型的准确率。高效计算&#xff1a; 使用 MoE 架构&#xff0c;40B 总参数中仅有 3.7B 激活参数&#xff0c;训练计算消耗仅为同…

大模型创新企业集结!百度智能云千帆AI加速器Demo Day启动

新一轮技术革命风暴席卷而来&#xff0c;为创业带来源源不断的创新动力。过去一年&#xff0c;在金融、制造、交通、政务等领域&#xff0c;大模型正从理论到落地应用&#xff0c;逐步改变着行业的运作模式&#xff0c;成为推动行业创新和转型的关键力量。 针对生态伙伴、创业…

IDEA破解后的配置

以下所有操作都要求进入全局setting而不是某一个项目的setting 进入全局Setting File→close project 进入欢迎页面 低版本 然后点击Setting 关闭自动更新 不关闭有可能会破解失败 Appearance & Behavior->System Settings->Updates下取消Automatically chec…

debian系统apt 国内安装源

debian系统apt 国内安装源&#xff1a; 国内阿里镜像源&#xff1a; deb http://mirrors.aliyun.com/debian stable main non-free contrib deb-src http://mirrors.aliyun.com/debian stable main non-free contrib 打开源文件位置&#xff1a;/etc/apt/sources.list,原来的内…

eNSP学习——RIP路由协议的汇总

目录 主要命令 原理概述 实验目的 实验内容 实验拓扑 实验编址 实验步骤 1、基本配置 2、配置RIPv1协议 3、配置RIPv2自动汇总 4、配置RIPv2手动汇总 需要eNSP各种配置命令的点击链接自取&#xff1a;华为&#xff45;NSP各种设备配置命令大全PDF版_ensp配置命令大全…

蓝桥杯物联网竞赛 比赛总结

CUBEMX配置建议&#xff1a; 对于CUBEMX配置来说stm32l071kbu6的引脚不算太多&#xff0c;功能模块相对的也不多&#xff0c;所以我建议直接熟练到能将所有模块烂熟于心&#xff0c;不用看原理图就能熟练配置下来&#xff0c;因为国赛看原理图去配置太花费时间 我建议学习的时…

小程序 UI 风格,赏心悦目

小程序 UI 风格&#xff0c;赏心悦目

【云原生】Kubernetes----RBAC用户资源权限

目录 引言 一、Kubernetes安全机制概述 二、认证机制 &#xff08;一&#xff09;认证方式 1.HTTPS证书认证 1.1 证书颁发 1.2 config文件 1.3 认证类型 1.4 Service Account 1.4.1 作用 1.4.2 包含内容 1.4.3 与Secret的关系 2.Bearer Tokens 3.基本认证 三、鉴…

Java Web学习笔记17——Vue快速入门

什么是Vue&#xff1f; Vue是一套前端框架&#xff0c;免除原生JavaScript中的DOM操作&#xff0c;简化书写。 基于MVVM&#xff08;Model-View-ViewModel&#xff09;思想&#xff0c;实现数据的双向绑定&#xff0c;将编程的关注点放在数据上。 官网&#xff1a;https://v…