小洛的前端技术博客Appearance
资源预加载
1. 资源预加载
资源预加载是指在浏览器空闲时间预先加载一些可能用到的资源，以减少用户等待时间，提高用户体验。
2. 资源预加载的时机
资源预加载的时机通常在页面加载完成后，但在用户进行操作之前。
使用 <link rel="preload"> 标签
html
<link rel="preload" href="https://example.com/image.jpg" as="image"><link rel="preload" href="https://example.com/image.jpg" as="image">这种方法会在页面加载时立即开始预加载指定的资源，并指定资源的类型。
安装 vite-plugin-preload 插件
vite-plugin-preload 是一个 Vite 插件，用于预加载资源。它可以在构建时将资源提前加载到浏览器的缓存中，从而提高页面加载速度。
- 安装插件：
bash
npm install vite-plugin-preload --save-devnpm install vite-plugin-preload --save-dev- 在
vite.config.js中配置插件：
javascript
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import preload from 'vite-plugin-preload';
export default defineConfig({
plugins: [
vue(),
preload[
{
rel: 'preload',
href: '/assets/js/main.js', // 需要预加载的 JS 文件
as: 'script',
},
{
rel: 'preload',
href: '/assets/styles/main.css', // 需要预加载的 CSS 文件
as: 'style',
},
{
rel: 'preload',
href: '/assets/image/*.{png,jpg,jpeg,svg,webp}', // 需要预加载的图片
as: 'image',
},
{
rel: 'preload',
href: '/assets/fonts/font.woff2', // 需要预加载的字体
as: 'font',
type: 'font/woff2',
crossorigin: 'anonymous', // 如果需要跨域加载字体
},
]
]
});import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import preload from 'vite-plugin-preload';
export default defineConfig({
plugins: [
vue(),
preload[
{
rel: 'preload',
href: '/assets/js/main.js', // 需要预加载的 JS 文件
as: 'script',
},
{
rel: 'preload',
href: '/assets/styles/main.css', // 需要预加载的 CSS 文件
as: 'style',
},
{
rel: 'preload',
href: '/assets/image/*.{png,jpg,jpeg,svg,webp}', // 需要预加载的图片
as: 'image',
},
{
rel: 'preload',
href: '/assets/fonts/font.woff2', // 需要预加载的字体
as: 'font',
type: 'font/woff2',
crossorigin: 'anonymous', // 如果需要跨域加载字体
},
]
]
});