perf: mark design system modules as side-effect-free

[iamakulov]

TODO: once this is merged and published, this needs a PR in appsmithorg/appsmith to bump the package version.

Description

This PR adds the sideEffects: false flag to package.jsons. When applied to appsmithorg/appsmith on top of appsmithorg/appsmith#20964, this makes the bundle 680 minified kB smaller (8.14 → 7.46 minified MB).

How does this work?

Webpack isn’t smart enough to figure out when importing a module will cause side effects (eg a console log, or a network request) vs when it won’t. So, by default, webpack keeps every module in the bundle (and just tries to remove unused consts/functions/classes instead).

Sometimes, this backfires. For example, if you have code like

// some-file.js
import { Button } from "design-system"
console.log(Button)

// design-system/index.js
export { Button } from "./button"
export { Toast } from "./toast"

// design-system/button.js
export const Button = () => ...

// design-system/toast.js
import 'big-third-party'
export const Toast = () => ...

// big-third-party/index.js
const foo = foo()
const bar = bar()

webpack won’t be able to drop big-third-party from dependencies, even though Toast isn’t used anywhere. That’s because webpack doesn’t know whether toast.js or big-third-party have any side effects.

By setting sideEffects: false, we tell webpack that, yes, no modules in this package will cause side effects, and it’s safe to remove toast.js if its exports aren’t used.

More about this: https://sgom.es/posts/2020-06-15-everything-you-never-wanted-to-know-about-side-effects/

Type of change

Please delete options that are not relevant.

• Chore (housekeeping or task changes that don't impact user perception)

How Has This Been Tested?

• Manual on main repo: smoke testing to ensure everything still looks fine

Test Plan

Add Testsmith test cases links that relate to this PR

Issues raised during DP testing

Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR)

Checklist:

Dev activity

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

QA activity:

• Test plan has been approved by relevant developers
• Test plan has been peer reviewed by QA
• Cypress test cases have been added and approved by either SDET or manual QA
• Organized project review call with relevant stakeholders after Round 1/2 of QA
• Added Test Plan Approved label after reveiwing all Cypress test

[changeset-bot]

🦋 Changeset detected

Latest commit: 6c7441f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@appsmithorg/design-system	Patch
@appsmithorg/design-system-old	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
design-system	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Feb 26, 2023 at 0:26AM (UTC)