在前端项目中用这个替换 axios 和 qs 模块并减少 73KB！

[suhaotian]

在前端项目中替换 axios 和 qs 模块，减少 73KB！

之前使用 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。然而，使用这个类似 axios 的 Fetch 封装，你可以将包体积从 35.6KB 减少到 6KB！

各模块的体积对比：

• axios 模块大小：

• qs 模块大小：

• 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,
});

---

所以，为什么你还在前端项目中使用 qs 和 axios？

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

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

---

原文翻译自：Replace axios and qs modules with this in frontend projects and reduce 73KB!