design-system icon indicating copy to clipboard operation
design-system copied to clipboard

Published 20 hours ago • verified publisher icon storybookjs

[Bug] Tree shaking when using the DS library in a host application

Open nebarf opened this issue 2 years ago • 0 comments

Describe the bug

I installed storybook DS as a dependency of a sample React app and verified how it affects the final bundle. At a first glance it seems that the library is not tree-shakable, meaning that importing just a single component of the DS results in the entire library being part of the final bundle.

Steps to reproduce the behavior

You can clone the repo at https://github.com/nebarf/storyboook-ds-tree-shaking and just playing with the commented import and jsx (https://github.com/nebarf/storyboook-ds-tree-shaking/blob/main/src/App.js#L3 and https://github.com/nebarf/storyboook-ds-tree-shaking/blob/main/src/App.js#L11). Screenshots below show how the final bundle does not change by importing and using a different set of library components.

Screenshots

Build 1

build-1-1 build-1

Build 2

build-2-1 build-2

Expected behavior

I would expect the library to be fully tree shakable and having only the imported components being part of the application bundle when the library is consumed.

Environment

  • OS: Ubuntu 20.04.4 LTS
  • Node.js version: v17.6.0
  • NPM version:8.5.1

nebarf avatar Mar 30 '22 15:03 nebarf