pre-fetch-plugin
v1.0.0
Published
A pre-fetch plugin for Vite and Webpack
Downloads
69
Readme
Pre-Fetch Plugin
Pre-Fetch Plugin 是一个为 Vite 和 Webpack 设计的插件,用于在页面加载时预先获取数据,从而提高应用性能。
安装
使用 npm 安装插件:
npm install pre-fetch-plugin
使用方法
Vite
在您的 vite.config.ts
文件中:
import { defineConfig } from 'vite';
import { createVitePlugin } from 'pre-fetch-plugin';
export default defineConfig({
plugins: [
createVitePlugin({
options: [
{
pathList: ['/home', '/user'],
hashList: ['all'],
reqs: [
{
key: 'userInfo',
method: 'GET',
url: '/api/user',
queryParams: { id: 'userId' },
cookieParams: { token: 'authToken' },
staticParams: { version: '1.0' }
}
]
}
]
})
]
});
Webpack
在您的 webpack.config.js
文件中:
const { WebpackPreFetchPlugin } = require('pre-fetch-plugin');
module.exports = {
// ... 其他配置
plugins: [
new WebpackPreFetchPlugin({
options: [
{
pathList: ['/home', '/user'],
hashList: ['all'],
reqs: [
{
key: 'userInfo',
method: 'GET',
url: '/api/user',
queryParams: { id: 'userId' },
cookieParams: { token: 'authToken' },
staticParams: { version: '1.0' }
}
]
}
]
})
]
};
配置选项
插件接受一个 options
数组,每个选项包含以下字段:
pathList
: 匹配的路径列表。使用['all']
匹配所有路径。hashList
: 匹配的 hash 列表。使用['all']
匹配所有 hash。reqs
: 预加载请求的配置数组。
每个请求配置包含以下字段:
key
: 用于存储结果的键名。method
: HTTP 方法(GET 或 POST)。url
: 请求的 URL。queryParams
: URL 查询参数。cookieParams
: 从 cookie 中获取的参数。staticParams
: 静态参数。
参数优先级:queryParams > cookieParams > staticParams
在应用中使用预加载数据
插件会在全局对象上添加一个 getPreFetchResult
方法。您可以在应用代码中使用这个方法来获取预加载的数据:
async function fetchSomeData(key) {
const preFetchResult = await window.getPreFetchResult(key);
if (preFetchResult) {
return preFetchResult;
} else {
// 如果没有预加载结果,执行正常的请求逻辑
return await normalFetchFunction();
}
}
注意事项
- 预加载脚本会异步加载,不会阻塞 DOM 解析。
- 确保在使用预加载数据之前,相关的 DOM 元素已经加载完成。
- 预加载请求会并行执行,以提高性能。
- 如果预加载请求失败,插件会在控制台输出错误信息,但不会影响页面的正常加载。
许可证
MIT