Replace axios and qs modules with this in frontend projects and reduce 73KB!

Previously, the reasons for using qs were:

• Encoding a nested object into a URL query string: qs.stringify({ a: { b: 1 } })
• Parsing a query string into an object: qs.parse(location.search).token

However, you can achieve the same functionality with lightweight alternatives:

• To parse a query string into an object, use the browser’s URLSearchParams :

new URLSearchParams(location.search).get(‘token’)

• To encode a nested object into a URL query string, use a lightweight implementation from xior :

import { encodeParams as stringify } from ‘xior’; stringify({ a: { b: 1 } });

As for axios, many developers use it for its convenient API. However, with this axios-Like Fetch wrapper, you can reduce the bundle size from 35.6KB to just 6KB!

axios module size:

axios bundle size screenshot

qs module size:

qs budnle size screenshot

Xior.js size:

xior.js size: 6.32KB -> 2.98KB(gzip)

The API almost same with Axios:

import axios from ‘xior’;

The only difference is change axios to xior!

So why are you still using qs and axios in your frontend projects?

If you have questions or encounter any issues, please comment or feel free to create a new issue.

Check it today 👉: https://github.com/suhaotian/xior