html-webpack-prefetch-rpc

html-webpack-prefetch-rpc

Introduction

一种 rpc请求时机 提前到 head中 的 预加载方案

usage

npm i -D html-webpack-prefetch-rpc

step1、webpack.config#plugins 添加插件

plugins: [
  ...,
  new HtmlWebpackPrefetchRpcPlugin({
    files: [{
      match: /homework\/index\.html/, // 设置匹配的页面
      dataUrlQueryRegx: /data_url=([^&]*)/ // 设置 url query中获取 data cdn url字段的正则
    }]
  })
]

step2、项目中添加 prefetchRpc 方法

  const prefetchRpc = (
    dataCdnUrl: string,
    fetchRpcPromise: () => Promise<any>,
  ) => {
    return new Promise((resolve, reject) => {
      const prefecthData = window.prefetchRpcData?.[dataCdnUrl];
      if (window.enablePrefetchRpc && prefecthData) {
        // 开启缓存 && 缓存数据存在
        resolve(prefecthData);
      } else {
        // 从线上rpc读取
        fetchRpcPromise()
          .then(data => {
            resolve(data);
          })
          .catch(err => {
            reject(err);
          });
      }
    });
  };

step3、项目中使用 prefetchRpc 来代替原来的 获取数据方法

原来 获取rpc数据的方法

const dataUrl = 'xxxx';
axios.get(dataUrl, { timeout: 20000 }).then(res => {
  if (res.status === 200 && res.data) {
    resolve(res.data);
  } else {
    reject(new Error('获取数据异常'));
  }
});

const dataUrl = 'xxxx';
prefetchRpc(dataUrl, () => {
  return new Promise((resolve, reject) => {
    // 原来 获取rpc数据的方法
    axios.get(dataUrl, { timeout: 20000 }).then(res => {
      if (res.status === 200 && res.data) {
        resolve(res.data);
      } else {
        reject(new Error('获取数据异常'));
      }
    });
  });
})

License