在你的前端项目中,用这个替换 Axios 和 qs 模块,可减少 70KB!
axios 和 qs 模块非常流行,但是你知道吗,在前端项目中,有更好的方案来减少打包后 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。然而,使用这个类似 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。