App Build size big due to export strategy.

Hello,

I built my app with tree shaking using webpack 1 and I have some concerns over my build size as react instantsearch has a major chunk of it, if I combine it with algoliasearch and algoliasearch-helper.

The usual way to import is like this.

import {SearchBox} from 'react-instantsearch/dom';

This import tries to import everything that is exported from https://github.com/algolia/instantsearch.js/blob/v2/packages/react-instantsearch/dom.js

The impact of it is https://cl.ly/132r0M3H2l1n

56 KB which could have been 4KB

I changed my code from

import { InstantSearch, SearchBox } from 'react-instantsearch/dom';
import { connectInfiniteHits } from 'react-instantsearch/connectors';

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 connectInfiniteHits from 'react-instantsearch/src/connectors/connectInfiniteHits.js';

and the impact was reduction of size from 113KB to 34KB.

The difference is 3x.

For someone who really needs speed in the app, every KB matters and tree shaking is not able to fix this.

It would be great if the export strategy is changed and this would help hugely with the user’s build size.

You can check the export strategy of material-ui here in case that helps. https://github.com/callemall/material-ui/tree/master/src

Thanks!

[RyanTheAllmighty]

Doing what was suggested by @harshmaur cut my app size in half (250kb).

I think this is definitely something that needs to be addressed

[vvo]

~That’s awesome, let’s do that! I can handle this, I love build tools~

EDIT: I did not handle it, do it