joeattardi / picmo

JavaScript emoji picker. Any app, any framework.
https://picmojs.com
MIT License
1.18k stars 116 forks source link

Hardcode extra icons to reduce bundle size #7

Closed midzer closed 4 years ago

midzer commented 4 years ago

Hi,

first of all, great library :+1: I've implemented it already in one of my websites :)

Can we reduce reduce bundle size somehow? Right now it is almost ~200kb which is kinda heavy. I realized emoji-button uses

"@fortawesome/fontawesome-svg-core": "^1.2.22",
"@fortawesome/free-regular-svg-icons": "^5.10.2",
"@fortawesome/free-solid-svg-icons": "^5.10.2",

for all used icons (in tabs and search).

We could get rid of those extra packages by extracting respective svg html for each icon and put it directly in code. I guess it wont change too often ;)

Would be happy to contribute to this cool project!

Have a nice weekend midzer

edit: I found out in dist rollup bundler extracts only icons which are necessary. So removing @fortawesome packages from bundle will have only minor effect. Maybe there are other possibilities to optimize?

joeattardi commented 4 years ago

Thanks for the feedback! As you pointed out, Rollup does tree-shaking so only the icons that are used are included in the bundle. Unfortunately, most of the bulk comes from the emoji data - there are a lot of emojis.

The bundle used to be even bigger, I did some preprocessing of the emoji data to make it smaller, but unfortunately it's still a hefty size.

This is actually a good size for an emoji library, compare to missive/emoji-mart which has a bundle size of 510kb (https://bundlephobia.com/result?p=emoji-mart@2.11.1).

Thanks for using emoji-button!