Bundle Size Optimisation

[Kazumz]

Hi there,

I'm developing a site at https://map.viriyu.com. The site is built using NextJS but I leverage 'React-Query' client side.

Today I've been looking at optimising the site's bundles and have found that 'React-Query' is the largest dependency by far.

I've searched around here and read that importing the 'query client' will incur some hefty import cost, but where I import it I only use a small part of the query client.

For example, bottom left of the bundle analysis screenshot is a hook called 'useGetQuery'. In here, I manually cancel queries where I see fit, importing the 'query client' lets me achieve this like so:

export default function useGetQuery<T = object>(
...
) {
    const queryClient = useQueryClient();

    const shouldCancel = shouldRun && queryDataChanged && !isServerSide();
    if (shouldCancel) {
        // Cancel previous running query if a new query is about to run.
        queryClient.cancelQueries({ queryKey: [key] });
    }

Due to using 'query client' like this and the fact that this hook is used in a number of pages, I've inadvertently imported the largest export from 'React-Query'.

In another hook, I am also listening via 'subscribe':

    const queryClient = useQueryClient();
    const queryCache = queryClient.getQueryCache();
    useEffect(() => {
        const unsubscribe = queryCache.subscribe((x) => {

Does anyone have any ideas on how to optimise this?

Thanks.

[TkDodo]

You are always importing the QueryClient, because you need to create one in your App to pass it to the <QueryClientProvider>. The QueryClient is a class, which cannot be tree-shaked. bundlejs shows that you'll get about 10.44kb gzipped when importing useQuery, QueryClient, QueryClientProvider, useQueryClient. That's likely the bare minimum that you need.

In v5, we'll drop about 10% bundle size due to no longer supporting legacy browsers, thus we can minify better by using modern features like private class fields.

[Kazumz]

Awesome, thanks for the info @TkDodo.

It looks like I'm currently using:
https://www.npmjs.com/package/react-query

I'll run through an update shortly to:
https://www.npmjs.com/package/@tanstack/react-query?activeTab=readme