0

Hello I have a index in a UI module within my components exporting all components in that folder like so:

~/components/ui/index.js:

import Button from './Button';
import Footer from './Footer';

export { Button, Footer }

And I use it in some page like so:

import { Button } from '~/components/ui';

export default {
  components: {
     Button,
     Footer: () => import('~/components/ui/Footer')
  }
}

Now ideally, the Footer component should be split in a different chunk, and only be loaded if needed. This works if I remove it from the exports of ~/components/ui/index.js, like so:

~/components/ui/index.js:

import Button from './Button';
//import Footer from './Footer'; 

export { Button, /*Footer*/ }

Now this works. But I would like to keep it in the index. And use webpack treeshaking to eliminate the Footer from the default bundle.

How can I achieve this?

Tim
  • 5,521
  • 8
  • 36
  • 69
  • This might be a configuration problem. Have you properly set `sideEffects: false` in your package.json. Note also that tree shaking will be active in production mode. In development mode, unused parts of your code will be marked as `unused` but not removed. https://webpack.js.org/guides/tree-shaking/ – Saraband Apr 25 '19 at 08:51
  • @Saraband Yes, I am testing it in production mode. Do I need to specify a package.json for the `~/components/ui` folder with `sideEffects: false`? – Tim Apr 25 '19 at 08:53
  • In the main `package.json` of your project you can specify the property `sideEffects` (which can be either a boolean or an array of string) [to mark files that are safe to prune if unused](https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free). So in your case you can mark `"sideEffects": [ "./components/ui/*"]` so the compiler knows any file from `./components/ui` are safe to be tree shaked – Saraband Apr 25 '19 at 09:00

0 Answers0