ealush / emoji-picker-react

The most popular React Emoji Picker
https://ealush.com/emoji-picker-react/
MIT License
1.04k stars 171 forks source link

Size of the library + SSR #359

Open zgrybus opened 1 year ago

zgrybus commented 1 year ago
  1. Why does the library weigh as much as 250 kb? Quite a lot for a library that is an emoji selector. Is there a chance to reduce the size? I can help as a collaborator if needed :) - https://bundlephobia.com/package/emoji-picker-react@4.5.0
  2. What is the reason why the library cannot be rendered on the server? This is very important in our application :( What is blocking the library from being rendered by the server?
ealush commented 1 year ago
  1. Most of the size of the package is the emoji dataset. I tried to make it as small as possible by trimming down, and minifying all object properties. If you have a way to significantly reduce the size further-down, I'd love to support this PR. https://github.com/ealush/emoji-picker-react/blob/master/src/data/emojis.json

  2. The picker makes use of many browser APIs, it appends styles to the DOM, and makes very little sense on the server. If you need it on the server (why, though?), I would suggest creating a PR that adds a separate dist file, without a CSS import, that adds the css separately (you would need to import it yourself in your app). This way it would work on the server.

zgrybus commented 1 year ago

The picker makes use of many browser APIs, it appends styles to the DOM, and makes very little sense on the server. If you need it on the server (why, though?), I would suggest creating a PR that adds a separate dist file, without a CSS import, that adds the css separately (you would need to import it yourself in your app). This way it would work on the server.

@ealush But appending styles to the DOM, does not break the server side rendering. Of course, if you use classList API, it would, but there is no need for that, while using JSX 🤔

If you need it on the server (why, though?) To make app faster and to reduce the JS that needs to be fetched to use the application.