在你的前端项目中,用这个替换 Axios 和 qs 模块,可减少 70KB!
发布于 2 天前 作者 suhaotian 224 次浏览 来自 分享

axiosqs 模块非常流行,但是你知道吗,在前端项目中,有更好的方案来减少打包后 70KB 的大小!

我们使用 qs 的原因是:

  • 将嵌套对象编码为 URL 查询字符串:
    qs.stringify({ a: { b: 1 } })
  • 解析查询字符串为对象:
    qs.parse(location.search).token

然而,我们可以使用更轻量的替代方案实现相同功能:

  • 解析查询字符串为对象,使用浏览器自带的 URLSearchParams
    new URLSearchParams(location.search).get('token')
  • 将嵌套对象编码为 URL 查询字符串,可使用 xior 提供的轻量级别实现:
    import { encodeParams as stringify } from 'xior';  
    stringify({ a: { b: 1 } });

至于 axios,许多开发者使用它是因为它的便捷 API。然而,使用这个类似 axiosFetch 封装,你可以将包体积从 35.6KB 减少到 6KB

各模块的体积对比:

  • axios 模块大小:
    axios size 37KB

  • qs 模块大小:
    qs size

  • Xior.js 大小:

而且 API 几乎与 Axios 相同:

唯一的区别就是 axios 换成 xior

import axios, {
  XiorError as AxiosError,
  isXiorError as isAxiosError,
  XiorRequestConfig as AxiosRequestConfig,
  XiorResponse as AxiosResponse,
} from 'xior';

const instance = axios.create({
  baseURL: '...',
  timeout: 20e3,
});

所以,为什么你还在前端项目中使用 qsaxios

如果有任何问题或遇到 bug,请留言或创建 Issue。

立即查看 👉 https://github.com/suhaotian/xior

回到顶部