Emoji plugin - initial import is slow
dugancathal opened this issue · comments
Environment
OS: MacOS 13.4.1
Browser: Chrome 115, Firefox 116
@draft-js-plugins/emoji version: ^4.6.5
draft-js version: ^0.11.7
Description
When testing the Emoji plugin locally (and on the draft-js-plugins demo site),
we see that it takes upwards of 2 seconds to build mappings from shortname to
unicode and back again. These mappings are built on initial import. For us,
as we import the library early on, this slows down time to First Contentful
Paint to a level that's unnacceptable for our application. It's also notable
on the Emoji demo site.
In performance exploration, we found that the emoji plugin leverages the
toShort function (from emoji-toolkit) heavily to convert from unicode to
the shortname. The plugin previously also mapped from shortname to unicode
separately. This double-mapping appears to be the primary cause of the
slowdown (for the useNativeEmoji option, at least).
Note: timings in the screenshots from a 2022 MacOS M1 running latest Google Chrome,
but this appears to be replicable on Firefox as well.
Reproducible Demo
This is reproducible on the demo site: https://www.draft-js-plugins.com/plugin/emoji
Performance profile before
Performance profile after
