feat(bundle): update bundle strategy

[francoischalifour]

This updates the bundle strategy.

Migrate from Webpack to Rollup

Rollup is now used to bundle InstantSearch.js. Rollup is more suited for libraries. It allows us to create lighter bundles and multiple bundle strategies.

	Webpack	Rollup
Bundle	372 kB	301 kB
GZipped	97 kB	84 kB

This sizes are without any further optimizations (will come gradually).

Different bundles

This is what is exported:

dist
├── instantsearch.development.js
├── instantsearch.development.js.map
├── instantsearch.production.min.js
└── instantsearch.production.min.js.map
cjs
├── components
├── connectors
├── helpers
├── index.js
├── lib
├── src
└── widgets
es
├── components
├── connectors
├── helpers
├── index.js
├── lib
└── widgets

See outdated (probably for InstantSearch.js version 4)

dist
├── cjs
│   ├── components
│   ├── connectors
│   ├── helpers
│   ├── index.js
│   ├── lib
│   └── widgets
├── es
│   ├── components
│   ├── connectors
│   ├── helpers
│   ├── index.js
│   ├── lib
│   └── widgets
└── umd
    ├── instantsearch.development.js
    ├── instantsearch.development.js.map
    ├── instantsearch.production.min.js
    └── instantsearch.production.min.js.map

UMD

The files have been renamed to become clearer for the users.

Usage

<script src="instantsearch.production.min.js"></script>

CJS

Usage

const instantsearch = require('instantsearch.js').default

ES

No changes.

See outdated (probably for InstantSearch.js version 4)

The ES bundle now exports instantsearch, and all widgets, connectors and helpers (highlight and snippet) at the root level.

Usage

import instantsearch, {
  searchbox,
  connectHits,
  highlight,
} from 'instantsearch.js';

const search = instantsearch();
search.addWidget(searchbox());

search.start();

The developer won't have to specify the old path:

import { searchbox } from 'instantsearch.js/es/widgets';

This is a pattern that we started with React InstantSearch (see new packages).

Development and production bundles

Since the bundle is getting heavy, the migration to Rollup has made it easier to create separate UMD bundles:

• instantsearch.development.js
• instantsearch.production.min.js

These names were inspired by the React strategy.

The development bundle will include everything that the default bundle has so far. The production bundle will not include the warnings (everything that is runtime) and the verbose widget/connector usages.

Everything under this condition will get stripped in the production bundle:

if (__DEV__) {
  // development only
}

In the CJS and ES bundle, it's converted to:

if (process.env.NODE_ENV === 'development') {
  // development only
}

What's next

This new bundle strategy allows to gradually remove development feature from the production bundle.

[algobot]

Deploy preview for instantsearchjs ready!

Built with commit d5f1543

https://deploy-preview-3260--instantsearchjs.netlify.com

[samouss]

Did you tried to run an application with each of the version (cjs, es, umd) ?

[francoischalifour]

@samouss Yes, I created an app for each bundle. I also updated the PR description to add each usage.

[samouss]

It would be nice to build the Vue version with the new build to see any size differences. It might be possible that the build will increase because Rollup will not be able to correctly tree shake the InstantSearch imports.

[francoischalifour]

The branch has been updated to not rename the CJS and ES bundle in order to facilitate the usage in other libraries for now (the original post has been updated).

Happy to review this PR as a group since the changes can seem quite consequent.

[Haroenv]

yay 🙌

[francoischalifour]

🎉