fix: reduce toolbar bundle size by 60% #20122

pauldambra · 2024-02-04T20:00:40Z

Toolbar is 2.2MB of JS, that's an awful lot...

a production build shows half a meg of syntax highlighting

outputs a file that can be used to generate a view of the bundle at https://esbuild.github.io/analyze/ (that has awesome explanation of why a file is included when you click on things)
also allows outputting a HTML file of the bundle locally NODE_ENV=production pnpm build && pnpm visualize-toolbar-bundle
moves LemonMarkdown out of the LemonTextArea file so that a circular dependency out to TextCard and back doesn't affect LemonTextArea
declares which files have sideeffects so that we can tree-shake LemonUI in the toolbar bundle
and removing CodeSnippet for showing the current selector in the HTML element window
and replaces any import of posthog-js with posthog-js-lite saving about 90kb
and makes sure we don't use the datepicker which removes a few dependencies
down by 60% at this point
almost all remaining is react and antd

github-actions · 2024-02-04T20:09:41Z

Size Change: -1.37 MB (-61%) 🏆

Total Size: 863 kB

Filename	Size	Change
`frontend/dist/toolbar.js`	863 kB	-1.37 MB (-61%)	🏆

_{compressed-size-action}

posthog-bot · 2024-02-04T20:10:24Z

📸 UI snapshots have been updated

6 snapshot changes in total. 0 added, 6 modified, 0 deleted:

chromium: 0 added, 6 modified, 0 deleted (diff for shard 2)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

pauldambra · 2024-02-06T09:21:03Z

@Twixes the toolbar is bundling more of lemon ui than I think it should... which means it's getting half a meg of formatting code it will never use.

There don't seem to be any tools to investigate this other than thinking 😱

Tagging you since it's lemon ui... and in case you've any suggestions on how to investigate 😊

Twixes · 2024-02-06T12:33:49Z

Oh wow, we definitely don't need a lot of this. @pauldambra By "investigate" do you mean finding out why this is not being tree-shaked? It definitely should be, but I have never looked into how we do tree-shaking at all, so would have to start with reading into that part of our ESBuild process 😅

pauldambra · 2024-02-06T13:11:17Z

I have never looked into how we do tree-shaking at all

Ah, that makes two of us 🙈

You're welcome to ignore this then and I'll keep it spinning in the background

pauldambra · 2024-02-17T13:09:26Z

if i edit the toolbar so that all it does is import lemontextarea then we still import the half meg of formatting code 👀

… uses

posthog-bot · 2024-02-17T17:12:53Z

📸 UI snapshots have been updated

756 snapshot changes in total. 0 added, 756 modified, 0 deleted:

chromium: 0 added, 648 modified, 0 deleted (diff for shard 2)
webkit: 0 added, 108 modified, 0 deleted (diff for shard 2)

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2024-02-17T21:18:17Z

📸 UI snapshots have been updated

42 snapshot changes in total. 0 added, 42 modified, 0 deleted:

chromium: 0 added, 41 modified, 0 deleted (diff for shard 1, diff for shard 2)
webkit: 0 added, 1 modified, 0 deleted (diff for shard 2)

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2024-02-17T21:27:56Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 1 modified, 0 deleted (diff for shard 2)
webkit: 0 added, 1 modified, 0 deleted (diff for shard 2)

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2024-02-17T21:46:39Z

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

chromium: 0 added, 0 modified, 0 deleted
webkit: 0 added, 1 modified, 0 deleted (diff for shard 2)

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2024-02-17T22:06:35Z

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

chromium: 0 added, 0 modified, 0 deleted
webkit: 0 added, 1 modified, 0 deleted (diff for shard 2)

Triggered by this commit.

👉 Review this PR's diff of snapshots.

marandaneto · 2024-02-19T09:38:43Z

LGTM but I don't feel confident enough to YOLO, maybe someone else with more experience on the codebase + bundlers can take a look as well.

daibhin

Looks good.

Any idea where the remaining antd.less styling is coming from? Based on this comment it suggests we removed it from the toolbar at some point

pauldambra · 2024-02-19T11:39:02Z

Any idea where the remaining antd.less styling is coming from? Based on this comment it suggests we removed it from the toolbar at some point

ah, no, is a dangling comment from me getting over excited in the past 🙈

daibhin · 2024-02-19T11:43:52Z

Ah ok, maybe we can remove it though 🤔 I'll have a look where we're still relying on antd in the toolbar because it's not imported directly anywhere in that directory

pauldambra · 2024-02-19T11:49:50Z

I think in the tooltip component still?

We use lemon-ui, so while we're still using antd there then I think we're stuck...

daibhin · 2024-02-19T12:01:58Z

Another reason to get this PR in #20160 💪

pauldambra · 2024-02-19T14:09:51Z

@joethreepwood in case you do changelog before wednesday all hands this one should definitely go in

* output analyzable build info for the toolbar * don't use code snippet it adds half a meg * Update UI snapshots for `chromium` (2) * use esbuild visualizer instead * fix * allow treeshaking and remove circular dependency from imports toolbar uses * fix * lint the mjs files at the root of frontend folder * no need to mention lemonui at all * no ned to specify metafile * don't allow posthog-js to sneak into the toolbar * simpler date picker so fewer dependencies * maybe this * like this? * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (2) * ragE * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (2) * too easy to break things this way * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `webkit` (2) * around the houses * Reset snapshots to master * explain why there's a plugin * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (2) * fix * fix * Update UI snapshots for `webkit` (2) * fix * Update UI snapshots for `webkit` (2) --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

pauldambra added 2 commits February 4, 2024 19:57

output analyzable build info for the toolbar

98c175f

don't use code snippet it adds half a meg

7804fc1

Update UI snapshots for chromium (2)

e70c56a

pauldambra added 2 commits February 4, 2024 20:55

use esbuild visualizer instead

22a42b7

fix

2694909

posthog-bot added the stale label Feb 14, 2024

pauldambra added waiting Prevents stale-bot from marking the PR as stale. and removed stale labels Feb 14, 2024

Merge branch 'master' into fix/toolbar-bundle-size

8c25e4e

allow treeshaking and remove circular dependency from imports toolbar…

e7c8cad

… uses

PostHog deleted a comment from posthog-bot Feb 17, 2024

pauldambra and others added 10 commits February 17, 2024 14:06

fix

319f36d

lint the mjs files at the root of frontend folder

f5cada0

no need to mention lemonui at all

a52c32f

no ned to specify metafile

8c6a8cb

don't allow posthog-js to sneak into the toolbar

2929019

simpler date picker so fewer dependencies

4a7b016

maybe this

ec5b06c

like this?

feb52b9

Update UI snapshots for webkit (2)

d31e3b9

Update UI snapshots for chromium (2)

ecc36a5

github-actions bot added 2 commits February 17, 2024 17:19

Update UI snapshots for webkit (2)

c63217f

Update UI snapshots for chromium (2)

ff69e8a

pauldambra and others added 4 commits February 17, 2024 21:13

explain why there's a plugin

9cbd4fe

Update UI snapshots for webkit (2)

3d8aa48

Update UI snapshots for chromium (1)

dcbe80f

Update UI snapshots for chromium (2)

b5299fa

github-actions bot added 2 commits February 17, 2024 21:25

Update UI snapshots for webkit (2)

53e52e3

Update UI snapshots for chromium (2)

8fd7404

pauldambra and others added 3 commits February 17, 2024 21:37

fix

9ef93b1

fix

6657e4a

Update UI snapshots for webkit (2)

5e5d63f

fix

82b33b4

pauldambra changed the title ~~fix: toolbar bundle size~~ fix: reduce toolbar bundle size by 60% Feb 17, 2024

pauldambra requested review from Twixes and a team February 17, 2024 22:04

Update UI snapshots for webkit (2)

fecd095

pauldambra requested a review from benjackwhite February 19, 2024 08:55

Merge branch 'master' into fix/toolbar-bundle-size

b0d6a74

daibhin approved these changes Feb 19, 2024

View reviewed changes

pauldambra merged commit d5df038 into master Feb 19, 2024
79 checks passed

pauldambra deleted the fix/toolbar-bundle-size branch February 19, 2024 11:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: reduce toolbar bundle size by 60% #20122

fix: reduce toolbar bundle size by 60% #20122

pauldambra commented Feb 4, 2024 •

edited

github-actions bot commented Feb 4, 2024 •

edited

posthog-bot commented Feb 4, 2024

pauldambra commented Feb 6, 2024

Twixes commented Feb 6, 2024

pauldambra commented Feb 6, 2024

pauldambra commented Feb 17, 2024

posthog-bot commented Feb 17, 2024

posthog-bot commented Feb 17, 2024

posthog-bot commented Feb 17, 2024

posthog-bot commented Feb 17, 2024

posthog-bot commented Feb 17, 2024

marandaneto commented Feb 19, 2024

daibhin left a comment

pauldambra commented Feb 19, 2024

daibhin commented Feb 19, 2024

pauldambra commented Feb 19, 2024

daibhin commented Feb 19, 2024

pauldambra commented Feb 19, 2024

fix: reduce toolbar bundle size by 60% #20122

fix: reduce toolbar bundle size by 60% #20122

Conversation

pauldambra commented Feb 4, 2024 • edited

github-actions bot commented Feb 4, 2024 • edited

posthog-bot commented Feb 4, 2024

📸 UI snapshots have been updated

pauldambra commented Feb 6, 2024

Twixes commented Feb 6, 2024

pauldambra commented Feb 6, 2024

pauldambra commented Feb 17, 2024

posthog-bot commented Feb 17, 2024

📸 UI snapshots have been updated

posthog-bot commented Feb 17, 2024

📸 UI snapshots have been updated

posthog-bot commented Feb 17, 2024

📸 UI snapshots have been updated

posthog-bot commented Feb 17, 2024

📸 UI snapshots have been updated

posthog-bot commented Feb 17, 2024

📸 UI snapshots have been updated

marandaneto commented Feb 19, 2024

daibhin left a comment

Choose a reason for hiding this comment

pauldambra commented Feb 19, 2024

daibhin commented Feb 19, 2024

pauldambra commented Feb 19, 2024

daibhin commented Feb 19, 2024

pauldambra commented Feb 19, 2024

pauldambra commented Feb 4, 2024 •

edited

github-actions bot commented Feb 4, 2024 •

edited