TLDR: The main bundleindex.js was reduced from499.45 KiB to355.74 KiB and reduced the size of the pages were using the emoji picker.

I noticed Vite was showing a warning about one of the chunks getting larger than500 KiB so I installed a plugin to start the analyses and to make it easier in the future, I added an npm script:yarn stats.

The initial analyses:

• I noticed the emoji plugin was adding a lot of stuff in the main chunk
• I also noticed lodash was doing the same even though we don't use it too much

What I made:

• We already had a plugin calledIconField that was abstracting the emoji usage but we were not using it consistently, so I refactor the code to use it. After that, I created a lazy version of this component, so it could be loaded when it is needed only.
• I noticed thetestHelpers was importing therange function directly from the lodash bundle instead of specifying the full path.

Result: