refactor: optimize bundle size with isolated modules #1839

anuraghazra · 2023-11-23T08:15:16Z

The problem:

Currently blade is bundled into a single index.js file and gets shipped to consumers, which consumers then import and treeshake.

This works for treeshaking the whole bundle as a single module but this creates an issue where lazy loading components / codesplitting components doesn't work, if consumer tries to codesplit a component from blade it will always remain in the main bundle instead of in a new chunk.

react-router also has the similar problem, read more here.

The Solution:

Instead of bundling into a single index.js file, this PR changes the bundled output to preserve the original file structure via rollup's preserveModules flag and separate each module on it's own file. This way webpack will be able to individually codesplit/treeshake modules.

The bundled output now looks like this:

build
- lib
  - web
    - production
      - components
      - tokens
      - utils
    - development
      - components
      - tokens
      - utils
  - native
    - components
    - tokens
    - utils
- types
  - components/ (index.d.ts | index.native.d.ts)
  - tokens/ (index.d.ts | index.native.d.ts)
  - utils/ (index.d.ts | index.native.d.ts)

Further Bundle Optimizations

Lodash But Better

We've removed lodash as a dependency from blade and instead use alternative lightweight version of the utilities that we use internally.

Marked component specific dependencies as optional peerDependencies

Previously we used to bundle dependencies like @use-gesture/react, tinycolor2 with blade, which means even if you are not using BottomSheet or createTheme you'll get the bundle of these libraries.

Code split optimisation

And finally, with this change consumers can now properly do lazy loading of components and webpack will be able to create chunks.

Mark blade as sideEffects: false

Another problem which occurred because of Table, since Table uses @react-table/table-library & @emotion/react, emotion is causing side effects and both of these libraries gets included in the bundle, to fix these issues we marked blade as sideEffects:false in package.json.

Unfortunately, there is still an issue with emotion which causes around 5kb of bundle to still get into the main bundle even with sideEffects:false. This we can explore later on how to solve.

Impact:

After rendering a vite app with 1 button:
Before (v10.19.1): 104kb gzip
After: 78kb gzip
Reduction: 26kb

emotion-js/emotion#1279

changeset-bot · 2023-11-23T08:15:19Z

🦋 Changeset detected

Latest commit: 07deaa3

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

This PR includes changesets to release 1 package

Name	Type
@razorpay/blade	Minor

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

github-actions · 2023-11-23T08:15:51Z

✅ PR title follows Conventional Commits specification.

codesandbox-ci · 2023-11-24T05:37:28Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 07deaa3:

Sandbox	Source
razorpay/blade: basic	Configuration

…-wip

saurabhdaware

Can you check carousel story once? seems like its broken.
https://61c19ee8d3d282003ac1d81c-tenvvkemkx.chromatic.com/?path=/story/components-carousel--default-carousel

Might have to take a look at components that are using a bit complex lodash methods. I'll try testing few from my end

…/blade into anu/bundle-optimize-wip

anuraghazra · 2023-12-11T12:44:24Z

Can you check carousel story once? seems like its broken.

Checked. Imports were breaking.

bundlemon · 2023-12-11T14:16:50Z

BundleMon

Files removed (6)

Status	Path	Size	Limits
✅	Web Components _{build/components/index.production.web.js}	-330.06KB	-
✅	React Native Components _{build/components/index.native.js}	-187.05KB	-
✅	Web Tokens _{build/tokens/index.production.web.js}	-42.24KB	-
✅	React Native Tokens _{build/tokens/index.native.js}	-38.35KB	-
✅	Web Utils _{build/utils/index.production.web.js}	-3.38KB	-
✅	React Native Utils _{build/utils/index.native.js}	-2.27KB	-

Unchanged files (8)

Status	Path	Size	Limits
✅	CSS Theme Tokens _{build/css/paymentThemeDarkDesktop.css}	4.55KB	-
✅	CSS Theme Tokens _{build/css/paymentThemeDarkMobile.css}	4.54KB	-
✅	CSS Theme Tokens _{build/css/bankingThemeLightDesktop.css}	4.53KB	-
✅	CSS Theme Tokens _{build/css/bankingThemeLightMobile.css}	4.52KB	-
✅	CSS Theme Tokens _{build/css/bankingThemeDarkDesktop.css}	4.52KB	-
✅	CSS Theme Tokens _{build/css/paymentThemeLightDesktop.css}	4.52KB	-
✅	CSS Theme Tokens _{build/css/bankingThemeDarkMobile.css}	4.51KB	-
✅	CSS Theme Tokens _{build/css/paymentThemeLightMobile.css}	4.51KB	-

Total files change -603.34KB -94.34%

Final result: ✅

View report in BundleMon website ➡️

Current branch size history | Target branch size history

packages/blade/package.json

snitin315 · 2023-12-12T09:18:31Z

packages/blade/scripts/buildBlade.sh

+# This script is used to build the blade package.
+set -e
+
+yarn build:clean


We can also use it without glob pattern like run-s build:clean build:generate-types build:react-prod build:react-dev build:react-native, right?

snitin315 · 2023-12-13T11:54:28Z

packages/blade/docs/guides/Installation.stories.mdx

-   yarn add @razorpay/blade [email protected] @floating-ui/react
+   yarn add @razorpay/blade [email protected]


@floating-ui/react is no longer a peer dependency?

Co-authored-by: saurabhdaware <[email protected]>

saurabhdaware and others added 10 commits November 18, 2023 18:00

reimplement lodash as custom utils

e53ac42

fix: build error

3d00f19

fix: isEmpty implementation

734f218

fix: get function

4b68e60

fix: broken types

ffedda3

feat: add bundling changes

79df5cb

Merge branch 'rip-lodash' of github.com:razorpay/blade into rollup-pls

ba0158b

chore: wip test

9f21eec

feat: isolate modules & isolate types

ed77d7d

chore: update examples

4261a5a

anuraghazra changed the base branch from rip-lodash to master November 23, 2023 08:15

anuraghazra changed the base branch from master to rip-lodash November 23, 2023 08:15

anuraghazra changed the base branch from rip-lodash to rollup-pls November 23, 2023 08:16

anuraghazra added 2 commits November 24, 2023 11:00

chore: lib root

a117f41

chore: update lock

7baf202

anuraghazra added 4 commits November 28, 2023 13:10

fix: nodenext type resolution

72a542a

chore: prod and dev bundles

55a3cb2

fix: native bundle

117c282

chore: add gitignore

b48d07b

anuraghazra marked this pull request as ready for review November 30, 2023 05:47

anuraghazra requested review from chaitanyadeorukhkar, kamleshchandnani, dhruvdutt, nashcheez, divyanshu013, saurabhdaware and snitin315 as code owners November 30, 2023 05:47

anuraghazra added 4 commits December 11, 2023 12:39

chore: update lock

d3e22cb

chore: update docs

0ca8d47

Merge remote-tracking branch 'origin/master' into anu/bundle-optimize…

5e11a0d

…-wip

Create weak-adults-dance.md

e2e4f73

saurabhdaware requested changes Dec 11, 2023

View reviewed changes

anuraghazra added 6 commits December 11, 2023 16:17

chore: fix bad imports

537043f

Merge branch 'anu/bundle-optimize-wip' of https://github.com/razorpay…

8e0e164

…/blade into anu/bundle-optimize-wip

chore: reexport useTheme from utils

b87b285

chore: fix examples

c67e99e

chore: fix examples

b573db9

chore: added test for utils

11e61a5

chore: fix eslint

cdf3e95

anuraghazra added Review - L2 Second level of review and removed Review - L1 First level of review labels Dec 11, 2023

chore: fix lint

d94f9ed

chore: remove bundlemon

50af723

snitin315 reviewed Dec 12, 2023

View reviewed changes

packages/blade/package.json Show resolved Hide resolved

snitin315 reviewed Dec 12, 2023

View reviewed changes

anuraghazra added 4 commits December 13, 2023 14:41

chore: remove build.sh file

c9b5a21

chore: add migration doc

c83fff4

chore: update module name mapper changelog

dae76a6

Merge remote-tracking branch 'origin' into anu/bundle-optimize-wip

07deaa3

snitin315 reviewed Dec 13, 2023

View reviewed changes

kamleshchandnani approved these changes Dec 13, 2023

View reviewed changes

kamleshchandnani merged commit 40e51a5 into master Dec 13, 2023
14 checks passed

kamleshchandnani deleted the anu/bundle-optimize-wip branch December 13, 2023 12:27

saurabhdaware mentioned this pull request Mar 18, 2024

useTheme hook not working if imported from blade/utils #1497

Closed

anuraghazra added a commit that referenced this pull request Apr 9, 2024

refactor: optimize bundle size with isolated modules (#1839)

2ac54fb

Co-authored-by: saurabhdaware <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: optimize bundle size with isolated modules #1839

refactor: optimize bundle size with isolated modules #1839

anuraghazra commented Nov 23, 2023 •

edited

Loading

changeset-bot bot commented Nov 23, 2023 •

edited

Loading

github-actions bot commented Nov 23, 2023 •

edited

Loading

codesandbox-ci bot commented Nov 24, 2023 •

edited

Loading

saurabhdaware left a comment

anuraghazra commented Dec 11, 2023

bundlemon bot commented Dec 11, 2023

snitin315 Dec 12, 2023

snitin315 Dec 13, 2023

		yarn add @razorpay/blade [email protected] @floating-ui/react
		yarn add @razorpay/blade [email protected]

refactor: optimize bundle size with isolated modules #1839

refactor: optimize bundle size with isolated modules #1839

Conversation

anuraghazra commented Nov 23, 2023 • edited Loading

Further Bundle Optimizations

changeset-bot bot commented Nov 23, 2023 • edited Loading

🦋 Changeset detected

github-actions bot commented Nov 23, 2023 • edited Loading

codesandbox-ci bot commented Nov 24, 2023 • edited Loading

saurabhdaware left a comment

Choose a reason for hiding this comment

anuraghazra commented Dec 11, 2023

bundlemon bot commented Dec 11, 2023

BundleMon

snitin315 Dec 12, 2023

Choose a reason for hiding this comment

snitin315 Dec 13, 2023

Choose a reason for hiding this comment

anuraghazra commented Nov 23, 2023 •

edited

Loading

changeset-bot bot commented Nov 23, 2023 •

edited

Loading

github-actions bot commented Nov 23, 2023 •

edited

Loading

codesandbox-ci bot commented Nov 24, 2023 •

edited

Loading