prefetch 和 preload 及 webpack 的相关处理

最新推荐文章于 2024-06-06 17:11:37 发布
最新推荐文章于 2024-06-06 17:11:37 发布
阅读量2.6k 收藏 2
点赞数
文章标签： html performance javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chanvin/article/details/105904027
版权

使用预取和预加载是网站性能和用户体验提升的一个很好的途径，本文介绍了使用 prefetch 和 prefetch 进行预取和预加载的方法，并使用 webpack 进行实现

Link 的链接类型

<link> 标签的 rel 属性可以定义链接类型，prefetch 是其中的一种，与 href 配合使用可以预取或预加载对应资源

<link rel="prefetch" herf="URL">

preload 是另外一种类型，同样用 href 定义资源地址，但其处理预取外，还会对资源进行解析，所以还要增加属性 as，说明资源的类型

<link rel="preload" href="URL" as="MIME_TYPE">

预取资源

prefetch 表示用户在接下来的浏览中（例如在下一个页面），有可能用到对应资源，提示浏览器要在闲时获取对应资源

先新建文件夹 prefetch-preload-demo（本文所有代码将在此创建），安装相关依赖，并新建文件夹 static

mkdir prefetch-preload-demo
cd prefetch-preload-demo
npm init -y
npm i -D http-server
mkdir static

在 static 中创建 prefetch.html， main.js 和 script.js

prefetch.html 定义了一个 rel 为 prefetch 的链接

<html>
<head>
<title>Prefetch</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="prefetch" href="script.js"&
最低0.47元/天 解锁文章
Chanvin
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack系统学习（六）打包分析，Preload和Prefetch
Niall_Tonshall的博客
02-14 3207
1. 打包分析 我们需要在使用webpack的时候添加一些配置： webpack --profile --json > stats.json 这个配置会在打包完成之后生成一个stats.json文件，这个文件中就包含了一些打包过程和打包结果的很多信息，我们可以借助下面的几个网站来上传该文件并分析： http://webpack.github.com/analyse/； http://alexkuz.github.io/webpack-chart/； 这里我推荐使用Webpack Bundle Ana
Webpack之prefetch和preload
Meskjei的博客
08-29 3272
文章目录引入例子 引入 所有新技术的出现都是为了解决现有的问题或者是旧技术没法解决的问题。prefetch和preload也是如此。 现在有两个问题： 首先，代码的懒加载固然能是首页加载的速度变快，可是相应的，待到用户与页面交互再加载交互相关代码会使得用户首次交互的体验不佳（长时间没有对操作进行响应）。 其次，在SplitChunksPlugin的默认配置中，chunks字段默认是为async的...
webpack 打包后 首页有很多 link 标签 ，ref=prefetch 和 ref=preload
xiao_yu_liu的博客
09-20 6124
如图：vue 项目 在 webpack 打包后的 index.html ，里面会出现很多 得 link 标签， 将你的所有打包好的文件都 预加载进来 但是你并不需要，需要通过 配置 webpack 来将其去掉 <link href=css/chunk-02316de6.d6a34d41.css rel=prefetch> <link href=css/chunk-1...
webpack 预加载资源preload和prefetch
最新发布
qq_37550440的博客
06-06 1086
webpack 预加载资源 减少首屏绘制时长
webpack Prefetching/Preloading
冰魂魄的博客
08-05 301
1：是什么 preloading：设置这个指令，就会在当前的页面中，以较高优先级预加载某个资源。其实就相当于浏览器的预加载，但是浏览器的预加载只会加载html中声明的资源，但是preloading突破了这个限制，连css和js资源也可以预加载一波。 Prefetching：设置这个指令，就表示允许浏览器在后台（空闲时）获取将来可能用得到的资源，并且将他们存储在浏览器的缓存中。 这两种其实都是webpack提供的资源加载优化的方式，反正如果就是设置了这几个指令，就会先走个http的缓存，然后下次再次请求的
预加载利器：`preload-webpack-plugin`
gitblog_00036的博客
03-23 406
预加载利器：preload-webpack-plugin 项目地址:https://gitcode.com/GoogleChromeLabs/preload-webpack-plugin 在现代Web开发中，优化页面性能已经成为开发者不可忽视的任务之一。Google Chrome Labs推出的一款预加载插件——preload-webpack-plugin，正是为了帮助开发者更好地管理和控制资源的...
preload-webpack-plugin：请改用https：github.comvuejspreload-webpack-plugin
02-18
preload-webpack-plugin 弃用：该项目的分支可以代替使用。 一个Webpack插件，用于使用<link rel='preload'>自动连接异步（和其他类型）JavaScript块。 这有助于延迟加载。 注意：这是的扩展插件，该插件可...
webpack4从0搭建组件库的实现
01-22
预取/预加载模块(prefetch/preload module) webpack v4.6.0+ 添加了预取和预加载的支持。 在声明 import 时，使用下面这些内置指令，可以让 webpack 输出 “resource hint(资源提示)”，来告知浏览器： pre
一个Webpack插件使用linkrelpreload自动连接异步
08-07
- 结合使用 `link rel="preload"` 和 `link rel="prefetch"`，前者适用于关键资源，后者适用于非关键资源，可以在用户交互后进行加载。 - 可以通过设置 `include` 和 `exclude` 配置，精细化控制预加载的资源范围...
webpack-libs-optimizations：在您的webpack项目中使用库？ 这是优化方法
02-05
10. **preload和prefetch**：使用HTML5的preload和prefetch属性，可以控制浏览器提前加载某些资源，优化加载顺序，提高用户体验。 综上所述，`webpack-libs-optimizations` 的核心是通过合理配置Webpack，以最佳的...
关于webpack代码拆分的解析
08-29
下面将详细讲解 Webpack 的代码拆分原理、方法及 CSS 拆分。 首先，代码拆分的主要目标是实现按需加载（Lazy Loading），即在用户实际需要时才加载相应的代码模块。这可以显著减少初次加载时的资源大小，尤其是对于...
webpack性能优化，代码分离分包，以及prefetch（预获取）和preload（预加载）详解
dxh9231028的博客
08-21 1511
webpack将所有打包成一个文件，但并不是所有代码都需要在第一时间显示，但所有代码需要全部下载完才能执行渲染，为了提高受屏渲染速度，我们经常会对webpack进行分包处理，然后按需加载在vue中我们可以通过在定义组件的地方如路由对象，或option api的组件声明中如下引入组件或者使用vue-lazyload插件在react中我们可以通过supence，import函数以及React.lazy结合使用完成懒加载，如下那么在webpack原生中如何实现分包处理，提高首屏渲染速度呢？
webpack(高级)--Prefetch和Preload shimming
聪明勇敢有力气的博客
02-15 996
webpack(高级)--Prefetch和Preload shimming
prefetch 和preload_在webpack中使用prefetch/preload
weixin_39963287的博客
12-24 638
这是什么？什么是prefetch？这种“资源提示” 告诉浏览器这是一个在未来可能使用到的资源。浏览器通常会在空闲状态取得这些资源，在取得资源之后搁在HTTP缓存以便于实现将来的请求。如果有多个‘预请求提示’则会在浏览器空闲时排队执行。当浏览器离开空闲状态时正好在‘预请求’资源，那么浏览器会取消任何正在进行中的请求(同时会将部分响应数据放置在缓存中，而在Header中继续使用Content-Rang...
webpack配置preload和prefetch预加载技术
jieyucx的博客
06-18 3310
Preload和Prefetch是两种优化前端性能的技术，它们可以让浏览器在某些条件下提前加载一些资源，从而加快应用程序的加载速度。Preload指的是在页面加载时预加载一些关键资源，这些资源在接下来的页面操作中会立即用到。Preload可以使用属性来实现，比如：其中，href表示需要预加载的资源路径as属性指定预加载资源的类型相比之下，Prefetch是在页面加载后不紧急需要但将来可能需要使用的资源进行预加载。Prefetch的实现方式是通过添加属性来实现，例如：这里。
Webpack高级学习：Preload / Prefetch
weixin_47295886的博客
03-27 346
我们前面已经做了代码分割，分成chunk,同时会使用 import 动态导入语法来进行代码按需加载（我们也叫懒加载，比如路由懒加载就是这样实现的）。当前页面优先级高的资源用 Preload 加载。下一个页面需要使用的资源用 Prefetch 加载。但是加载速度还不够好，比如：是用户点击按钮时才加载这个资源的，需要使用的资源，Prefetch既可以加载当前页面资源，在浏览器空闲的时候加载，最后的时候空闲的时候加载。空闲时间，加载后续需要使用的资源。加载下一个页面需要使用的资源。Preload加载优先级高。
Webpack 4教程 - 第八部分 使用prefetch和preload进行动态加载
05-16 550
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。原文出处：https://wanago.io/2018/08/13/webpack-4-course-part-seven-decreasing-the-bundle-size-with-tree-shaking/ 在本系列的第一篇文章中，我们讨论了导入（import）和导出（exp...
webpack4.x 系列(二) ☞懒加载 、Preload、Prefetch的讲解
单车去旅行的博客
04-02 1331
这部分讲解是根据打包后的文件分析，我们可以使用的工具。还有chunk为什么默认用异步方式打包，以及浏览器查看代码利用率。 一、打包后代码的分析 我们会对打包的过程做分析，分析步骤： 1.先在package.json里面的script上面写上这个，--profile--json>stats.json，如下面所示： 打包会生成一个stats.json的文件 2.然后Insta...
css preload
05-23
CSS Preload 是一种优化网页性能的技术，它通过预加载资源来加速网页的加载速度。具体来说，CSS Preload 可以在网页加载时提前加载一些重要的 CSS 文件，这样可以让浏览器在加载页面时更快地渲染出网页的内容，从而提升用户体验。 CSS Preload 的实现方式有两种：Link Prefetch 和 Link Preload。其中，Link Prefetch 是通过预加载来实现，而 Link Preload 则是通过预解析来实现。Link Prefetch 适用于那些资源消耗较小、对页面影响较小的情况，而 Link Preload 则适用于那些资源消耗较大、对页面影响较大的情况。 需要注意的是，CSS Preload 可能会导致一些额外的网络开销，因此在使用时需要谨慎考虑。此外，在实现 CSS Preload 时，也需要注意避免出现潜在的跨域问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值