Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Emoji-mart increases the decidim_core bundle size significantly #12785

Open
ahukkanen opened this issue Apr 27, 2024 · 0 comments
Open

Emoji-mart increases the decidim_core bundle size significantly #12785

ahukkanen opened this issue Apr 27, 2024 · 0 comments
Labels
type: bug Issues that describe a bug

Comments

@ahukkanen
Copy link
Contributor

Describe the bug

I was doing some work regarding the assets and I was wondering why the current production build size is significantly higher than the 0.28.0 release's (checked at try.decidim.org vs building the production assets at develop).

I noticed that there is some significant amount of emoji data added to the decidim_core.js bundle after migrating to Emoji-mart (#12243).

The significant line is this:

import data from "@emoji-mart/data"

Which includes this:
https://github.com/missive/emoji-mart/blob/16978d04a766eec6455e2e8bb21cd8dc0b3c7436/packages/emoji-mart-data/sets/15/native.json

Which is > 400 kB when unpacked.

To Reproduce

  1. Create the development app against develop
  2. Build the production assets
  3. Look at the size of the decidim_core.js bundle (make sure you are looking at the production asset)
  4. Compare the size with the same bundle created for version 0.28.0 (e.g. try.decidim.org)
  5. See the difference in sice

Expected behavior

I would expect the bundle size not to increase significantly when new versions are released.

Screenshots

No response

Stacktrace

No response

Extra data

  • Device: (any)
  • Device OS: (any)
  • Browser: (any)
  • Decidim Version: 0.29.0.dev
  • Decidim installation: local

Additional context

This difference is caused by the emoji data being included in the bundle itself.

I know this was a privacy problem in previous versions as the emoji data was loaded dynamically through a CDN.

But I believe that this data could be shipped in a separate bundle and loaded dynamically when the page has emoji selectors which would decrease the decidim_core.js bundle size.

While the data is gzipped in production during transfer, we should still try to minimize the bundle sizes for optimal performance.

There are probably many other places that could be optimized but I just happened to notice this as a potential "big win" opportunity.

Another one that I noticed when comparing commits between develop and release/0.28-stable (but not as significant) was the date picker introduced at #11768. Building this alone produces a bundle of 61kB (20kB when gzipped).

@carolromero carolromero added the type: bug Issues that describe a bug label May 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: bug Issues that describe a bug
Projects
Status: 🆕 New
Development

No branches or pull requests

2 participants