CODEWITHSUNDEEP
javascriptreactjswebpackcreate-react-apptree-shaking
Huuums
Huuums

Reputation: 107

Webpack won't treeshake unused named export objects (using Create React App)

Small repo which showcases the issue: https://github.com/Huuums/repro-webpack-treeshaking-object-issue

I have a customIcons.jsx file which exports a few SVG paths (some of which I may or may not want to use at some point). I export only 2 of the 4 icons into App.js (in above example).

import { abacus, addressBook } from './customIcons';

However when I now run yarn build the bundle size is as big as if I imported all 4 icons. It does not change at all depending on how many icons I import into App.js. Only when I omit the whole import statement (not importing anything from the file) I can see that the bundle size of the main.[hash].chunk.js decreases.

Am I doing something wrong here that webpack does not treeshake the unused objects?

Upvotes: 1

Views: 2020

Answers (1)

Huuums
Huuums

Reputation: 107

https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free

Turns out you have to mark your package as "sideEffectfree" for treeshaking to take place.

Setting "sideEffects": false inside the package.json the issue.

Upvotes: 2

Related Questions