Tree-shaking doesn't seem to be working with latest Webpack

[mariuslazar93]

Do you want to request a feature or report a bug?
Bug. Repo to reproduce: https://github.com/mariuslazar93/algolia-instantsearch-test . We are only concered about the final bundle size, so just running npm install and npm run build-prod will generate a dist folder with the production files.

Bug: What is the current behavior?
I am trying to create a production build using Webpack 4.5.0 and make use of tree-shaking to remove the unimported widgets/connectors.

I'm only importing 3 widgets inside ./src/js/search.js (listed below too), but the generated bundle report shows that all the widgets and connectors are imported into the final (production) bundle.

import instantsearch from 'instantsearch.js/es';
import { searchBox, hits, pagination } from 'instantsearch.js/es/widgets';

I'm splitting the bundles into app.bundle.js, vendor.bundle.js (what comes from /node_modules) and runtime.bundle.js (webpack runtime). I've added the webpack-bundle-analyzer to generate the dependencies report of the bundles (as you can see in the image).

It also seems like the prod bundle ends up with a duplicated loadash library which adds up to the final size.

Bug: What is the expected behavior?
Only the imported widgets should show in the final bundle. Only one loadash library.

Bug: What browsers are impacted? Which versions?
Doesn't apply.

Bug: What is the proposed solution?
Seems like Webpack 4+ is using a sideEffect property in package.json which dictates if the unused code can be removed safely by the minifier (UglifyJS in this case). More on their docs: https://webpack.js.org/guides/tree-shaking/ . Not sure if this is the problem or not.

What is the version you are using? Always use the latest one before opening a bug issue.
Latest.

If I'm missing something please let me know.

[Haroenv]

I've been investigating this a bit over and saw significant improvements in the bundle size.

I also noticed that when I regenerated the package-lock.json in your repo, or if I used Yarn, lodash is only installed / included in the bundle once.

I'll be doing two PRs to this repo with this in mind

[Haroenv]

mariuslazar93/algolia-instantsearch-test#1 for updating your lockfile

[mariuslazar93]

Awesome! Thanks for your work! The size is indeed noticeable 👍

Not sure if you guys are already using the ES6 modules for loadash and just importing the methods that you need, but if you don't, you can make even more improvements by using lodash-webpack-plugin and babel-plugin-lodash which will transform the importing syntax to be tree-shakable.

[Haroenv]

We should already be doing what’s necessary there, we just use a lot of Lodash in the helper (it’s very transformation-heavy and supports older browsers), so we can’t win a lot of size easy that way. It was investigated earlier. Thanks for the suggestion though!