perf: Add sideEffects declaration to package.json

[edisile]

This PR improves tree shaking when using the ES Module builds of the library. Currently, bundlers struggle to detect the fact that all of the exported components and hooks are side effect free, and can thus be tree shaken if not used explicitly. This leads to bundles that contain dead code for components that will never be rendered.

A minimal example can be found HERE: running npm run build and looking inside the resulting index.js bundle, we can see that it also contains code for the Icon and SearchBox components which are not used in App.tsx.

Done

• added sideEffects: ["**/*.scss"] to package.json

QA

In the minimal example above (HERE), open a new terminal and run npm run build; take note of the size of the index.js bundle. Run the command node patch.mjs (it adds the sideEffects property to this library's package.json), then run npm run build again; the size of index.js should be considerably lower.

QA in your project

In your project, build your bundles using the current version of the library (make sure you import the components from "@canonical/react-components/dist/esm", otherwise you will consume the CJS build which can not be tree shaken). Take note of the total bundle size.
Add "sideEffects": ["**/*.scss"] to node_modules/@canonical/react-components/package.json and run the build command of your project again. The resulting bundle size should be smaller (if you use ALL components in this library it will remain the same).

[webteam-app]

Demo

Jenkins

demos.haus