prefetch 和 preload 及 webpack 的相关处理

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

Link 的链接类型

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


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


预取资源

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.htmlmain.jsscript.js

prefetch.html 定义了一个 relprefetch 的链接



Prefetch








main.js 创建了一个按钮,并绑定了点击事件

let button = document.createElement('button');
button.innerHTML = 'Add Script';
button.addEventListener('click', e => {
  let script = document.createElement("script");
  script.src = "script.js";
  document.head.appendChild(script);
});
document.body.appendChild(button);

script.js 只是简单的打印了一下

console.log('script run');

运行服务器(也可在 package.json 中增加 server 脚本)

npx http-server

访问 http://localhost:8080 并导航至 static 中,点击 prefetch.html,或者直接访问线上页面,初始状态下,查看控制台的网络选项卡下的内容如下(不要勾选 Disable Cache,点击右侧齿轮,勾选 Use large request rows

prefetch 和 preload 及 webpack 的相关处理_第1张图片

  • script.js 被 fetch 下来,size 列的两个数字,275 B 表示下载的字节大小,0 B 表示解析的字节大小(即目前并没有解析)
  • 控制台是空的,即脚本没有运行

点击页面上的 Add Script,会在页面增加地址为 script.js

你可能感兴趣的:(prefetch 和 preload 及 webpack 的相关处理)