🗣[Discussion] Distribute individual bundles for each component

[mxstbr]

It would be awesome if I could import only a single component at a time by going a bit deeper into the filesystem, for example something like:

import Flex from '@primer/components/dist/Flex';
// or maybe even
import Flex from '@primer/components/Flex';

That mainly requires creating a JS file per component that has a module.exports instead of a single index.esm.js file. That would allow my app to only pull in the code that I am really using, instead of all components, and also solve #455 and #454.

[mxstbr]

I just realised that this is possible, sorry for the noise.

import Flex from '@primer/components/src/Flex';

[shawnbot]

@mxstbr this is possible, but it's not a great public API because in order for people to use it they need to know how to configure [insert your build tool(s) here] to compile our source files node_modules/@primer/components. If there's a generally acceptable way to do that, we're all ears! But it seems like having CommonJS and/or ESM builds of each component would be best, no?

[mxstbr]

Yes you are right, having those built would be even nicer. 👍

[mxstbr]

I have run into this now 🙈 When trying to import BaseStyles I get this error:

Going to see if I can work around that until individual bundles are a thing 👍

[shawnbot]

@mxstbr I’ve been thinking about this. Do you have a reproducible case of webpack not properly tree-shaking component imports? Because the ESM build should be easily shakable, and I’m wondering if we need something like sideEffects: false in our package.json.

[mxstbr]

Any commit before this if you build the frontend, basically: https://github.com/github/stardust-frontend/commit/20e9e706c7d2222d9032117aebc0a131d889bae1

[shawnbot]

@mxstbr according to the webpack docs:

Finally, "sideEffects" can also be set from the module.rules configuration option.

Unfortunately, I tried adding it both to package.json and to a webpack config, and can't for the life of me get webpack to remove the unused exports. 🤔

[mxstbr]

Maybe adding PURE annotations could help? Ref styled-components/babel-plugin-styled-components#114

[shawnbot]

Wait, if we're just calling styled() in most of our components, shouldn't those in turn be qualified as "pure"? Also, wouldn't that mean that users would have to use UglifyJS to properly tree-shake? 🤔

[mxstbr]

@shawnbot sorry that I linked that issue—we have removed that functionality from the Babel plugin again because it made Uglify ~10x slower. I was just linking to that so I wouldn't mess up the format of the comment 😅

Also, wouldn't that mean that users would have to use UglifyJS to properly tree-shake? 🤔

Yes or Terser, the maintained version of UglifyJS, which every webpack user uses out of the box!