React-instantsearch: [Question] Expected file size addon

[conblem]

Hello together

I was just experimenting with your awesome library
and im loving it this far.
But I couldn't help myself and noticed,
that just adding this component resulted in a 284kb chunk.

Is this expected?
Im using preact-cli.

import { h, Component } from 'preact';
import { InstantSearch, Hits, SearchBox } from 'react-instantsearch/dom';

const Product = ({ hit }) =>
    (<div>
        {hit.name}
    </div>);

const Result = () =>
    (<div>
        <SearchBox />
        <Hits hitComponent={Product} />
    </div>);

export default class Search extends Component {
    render() {
        return (
            <div>
                <h1>Search</h1>
                <p>
                    {process.env.NODE_ENV}
                </p>
                <InstantSearch
                    appId="latency"
                    apiKey="3d9875e51fbd20c7754e65422f7ce5e1"
                    indexName="bestbuy"
                >
                    <Result />
                </InstantSearch>
            </div>
        );
    }
}

[Haroenv]

You're right, we're currently working on decreasing the size of the module. It's mostly because we have some polyfills in the Algolia Helper and in the Algolia JS Client.

see also https://github.com/algolia/instantsearch.js/issues/1725, it has some workarounds, it's supposed to be significantly less than 285kb, is that minified and gzipped?

A possible workaround is importing from the exact files instead:

import createInstantSearch from 'react-instantsearch/src/core/createInstantSearch';
import algoliasearch from 'algoliasearch';

const InstantSearch = createInstantSearch(algoliasearch, {
    Root: 'div',
    props: { className: 'ais-InstantSearch__root' },
});
import SearchBox from 'react-instantsearch/src/widgets/SearchBox.js';
import Hits from 'react-instantsearch/src/widgets/Hits.js';

Does that make a difference for you?

[conblem]

Thanks for the fast answer i got quite an improvement.

Before: 284kb minified | 70kb minified gzipped
Now: 207kb minified | 60kb minified gzipped

But this is still quite strange, maybe it has something to do with Preact/PreactCompat.

[Haroenv]

Unfortunately that's the best that will be able for now, but we're busy making the packages that we depend on higher actively.

Closing for now, since no significant gains could be made, but we'll comment here once we've made significant improvements.

I hope you'll still have a good time implementing search with react-instantsearch

[vvo]

Could you use a bundler analyzer @conblem so we see what's wrong a bit more deeply?

https://github.com/samccone/bundle-buddy
https://github.com/robertknight/webpack-bundle-size-analyzer
https://github.com/danvk/source-map-explorer

[Haroenv]

The size difference is caused by https://github.com/webpack/webpack/issues/2867

[vvo]

Ah thanks for that!

[samouss]

We released a new version 5.2.0 that split the package into multiple ones. Those new packages are compatible with tree-shaking (with Webpack 4+). You can find more information about the migration process & motivations in the documentation. Don't hesitate to give us feedback!