【知识点】 <link> 元素的 rel 属性将rel设定为preload，表示浏览器应该预加载该资源，as属性表示获取

webpack打包后的html文件

打包后的html文件的<head>标签内，会有许多<link>标签

<link>标签的说明

HTML外部资源链接元素 (<link>) 规定了当前文档与外部资源的关系。该元素最常用于链接样式表，此外也可以被用来创建站点图标(比如PC端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。

<link>标签最常用来加载样式文件，常用的做法：
```
<link rel="stylesheet" href="a.css"/>
```
<link>标签用来加载pc端的favicon
```
<link rel="icon" href="favicon.ico">
```

<link>标签的其他用法

将rel设定为preload，表示浏览器应该预加载该资源，as属性表示获取特定的内容类。crossorigin属性表示该资源是否应该使用一个CORS请求来获取。

<link> 元素的 rel 属性的属性值preload能够让你在你的HTML页面中元素内部书写一些声明式的资源获取请求，可以指明哪些资源是在页面加载完成后即刻需要的。对于这种即刻需要的资源，你可能希望在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。

webpack打包后的html文件中的用法：

<head>
    1. 用link标签来加载网站的favico图标
    <link rel="icon" href="/favicon.ico">
    
    2. 定义预加载css文件 rel="preload" as="style"
    <link href="/css/app.css" rel="preload" as="style">
    <link href="/css/vendor.css" rel="preload" as="style">
    
    3. 定义预加载js文件 rel="preload" as="script"
    <link href="/js/app.js" rel="preload" as="script">
    <link href="/js/manifest.js" rel="preload" as="script">
    <link href="/js/vendor.js" rel="preload" as="script">
    
    4. 通过link标签加载css文件
    <link href="/css/vendor.css" rel="stylesheet">
    <link href="/css/app.css" rel="stylesheet">
</head>

相关的知识的链接：

MDN-link标签

MDN-link标签ref="preload"