babel-plugin:babel相关插件
build:编译源码ES6->ES5
script: 这里的文件会被自动收集 经过编译后插入到html的header中
src: webpack插件先关逻辑
test: 做一些函数测试
dist: 编译后生成的最终文件
可以应用在首屏接口上 和 js 并行发送请求 减少网络耗时 提升页面秒开率
插件会在 html 的 head 里面插入一段 code 从 query 上面获取参数 提前进行请求接口,插件会在 window 上挂载 usePreFetchApiService 方法,业务方可以使用此方法来获取结果数据。
![截屏2024-02-25 下午5 13 38](https://private-user-images.githubusercontent.com/13480948/308410750-f528fa8d-9a67-41df-a06b-2e5b5219db42.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM4NDI4NTIsIm5iZiI6MTcyMzg0MjU1MiwicGF0aCI6Ii8xMzQ4MDk0OC8zMDg0MTA3NTAtZjUyOGZhOGQtOWE2Ny00MWRmLWEwNmItMmU1YjUyMTlkYjQyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE2VDIxMDkxMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTE4MzFhMzkyZjdjZmNmMWEzMjllMDk3NGE2MTVlNTNjOGZjMThhNTYxZTE3NDlhNmYwYzg0MTZkMzg4MWE5ZWYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.E87oNkvu-xGY03R04iVGUAiQwnXUVR1Um0-XhaIYbmM)
- 可以配置一个页面 并行请求多个接口
- 可以配置多个页面 请求一个接口
- 可以配置多个页面请求多个接口
- 多个页面数据通过 hash||path 标识 防止数据互串
- 数据获取 支持静态参数,query 参数,cookie 参数
配置一个数组,根据 hashList || pathList 来匹配第一个命中的选项, 若两个字段同时存在则 pathList 优先级更高,每项有如下字段。
用于拦截是否发送预请求 只有命中才会发送 设置["all"] 则不区分页面 通过location.pathname比较
用于拦截是否发送预请求 只有命中才会发送 设置["all"] 则不区分页面 通过location.hash比较
需要请求的接口数组 可以是一个字符串也可以是一个对象 如果是对象必须包含 url 可以覆盖外层的配置 会对 method,params,staticParams,cookieParams 做聚合处理,覆盖外层参数。
请求的方法 默认为post 支持post||get
请求参数从query上解析
请求参数从cookie中解析
静态写死的参数
params > cookieParams > staticParams
const PreFetchApiPlugin = require('pre-fetch-api-webpack-plugin');
chainWebpack: config => {
config
.plugin('PreFetchApiPlugin')
.use(PreFetchApiPlugin, [[{
method: 'post',
params: { name: 'username' },
staticParams: {
age: '18',
},
cookieParams:{
_address:"somewhere"
}
hashList: ['all'],
urls: [
{ url: `/aaa` },
{
url: `/bbb`,
method: 'get',
params: { add: 'add' },
staticParams: {
age: 33,
name: '333333',
},
},
],
}]]);
}
const usePreFetchApiService = window.usePreFetchApiService?.();
export const getPageData = async () => {
const { preFetchService } = usePreFetchApiService?.() || {};
if (preFetchService) {
try {
const res = await preFetchService;
//可能设置多个接口 所以返回的是一个数组
return res[0];
} catch (error) {
// 接口请求报错 这里可以再次发送请求
}
} else {
// 因为异常原因 预请求运行报错导致 方法缺失
}
};