Tree shake big bundle size

I’m trying the amazing Shoelace for the first time today.

I’m working on a project with Rollup.

Everything works and is amazing.

One thing I don’t like though.

Just adding the following lines of code to my project increases it by 232 KB (from 747 KB to 979 KB) javascript side only.

import { SlButton } from '@shoelace-style/shoelace'

customElements.define('sl-button', SlButton)

If I use this instead it increases by 383 KB (from 747 KB to 1130 KB).

import { defineCustomElements } from '@shoelace-style/shoelace'

defineCustomElements()

As you can see from the images we have @stencil/core/internal/client/index.js of ~ 16 KB. Is it really needed?

Is it really necessary to have those 232 KB all together? Can we tree-shaking?

[claviska]

This has been resolved in beta 28 which no longer uses Stencil. The new dist contains a collection of ES modules so you can load everything, cherry pick components, or import with a bundler.

Part of the solution was adding the sideEffects property in Shoelace’s package.json so bundlers will see it. This enables tree-shaking in Rollup with zero config, but webpack users need to add this flag in their config. Not sure about other bundlers.

[claviska]

I’m working on an experimental build using Shoemaker and esbuild that resolves this. The end result is a collection of ES modules that are properly tree-shaken and split into chunks. The nice thing about this is that the same bundle can be served from a browser and into webpack/Rollup/etc.

I’ll post more details once I get a bit further with it.