在你的前端项目中,用这个替换 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。