modularize reactivesearch to reduce package size

[ArpiJakab]

Issue Type: Enhancement

Platform: Web

Description: Currently reactivesearch is a 576KB monolith that is way too large to use for mobile web apps.

Screenshots:

Minimal reproduction of the problem with instructions:

Reactivesearch version: v2.0.0

Browser: [all | Chrome XX | Firefox XX | Edge XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Anything else:

[ArpiJakab]

Also want to point out that the CDN does not respond with the gzipped version of the JS even thought my requests "Accept-Encoding" contains "br, gzip, deflate"

[metagrover]

Hi @ArpiJakab

The bundle size that you are mentioning here is the UMD build. It contains 30+ components with polyfills to have 100% browser support coverage. It's not a recommended solution for production apps.

I'd highly recommend you to use reactivesearch with babel import plugin to allow treeshaking (only bundling what you're using) and smaller build generation. We have covered this in our docs here.

Will look into CDN issues. Can you try the latest version please? I think that should work fine.

[ArpiJakab]

Thanks for the reply. I'm using create-react-app and I don't really want to hack the configs if I don't absolutely need to.

I've tried using direct path imports (import { ReactiveBase } from '@appbaseio/reactivesearch/lib/components/basic/ReactiveBase') , which reduced the @appbaseio package size includes from 576KB to about 250KB.

Do you think I can get it smaller using the advanced react-app-rewired techniques?

[metagrover]

The babel-import plugin does exactly what you've done here. It transforms the imports to direct lib imports. So, you will achieve the same level of size shrunk with what you've here. So I'd suggest you to use the direct imports as you're using with ReactiveBase for all other components, if you don't want to hack the configs.

[ArpiJakab]

Using the full path import, I get a runtime error:

"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."

[metagrover]

Make sure that you're importing these components as:

import ReactiveBase from '@appbaseio/reactivesearch/lib/components/basic/ReactiveBase';

All of them should be default export, so no { }.

[ArpiJakab]

Yep, that was it. Thx!