search

missive / emoji-mart

🏪 One component to pick them all
https://missiveapp.com/open/emoji-mart
MIT License
8.7k stars 835 forks source link

Reduce production bundle size #156

Closed Dipen-Dedania closed 5 years ago

Dipen-Dedania commented 6 years ago

First of all, great work with the plugin. It's working perfectly fine. The issue I'm facing right now is, my bundle.js is got so big (2.5MB). I have created my ReactJS application with create-react-app and I'm creating my production build with npm run build So I was trying to figure out the issue behind the size issue. And I came across with one Medium article and I tried source-map-explorer plugin. And I was completely shocked by seeing a result that emoji-mart is taking ~600kb.

Any suggestion on how to improve this? bundle_map

mattbucci commented 6 years ago

It would be great if there was a way to ignore parts of the data file similar to how when using moment js you can ignore locales if you don't need them using new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

Dipen-Dedania commented 6 years ago

@mattbucci I have customized emoji-mart plugin as per my requirement (Mr Emoji) and published on NPM, hoping that, this might be useful to someone. :) https://www.npmjs.com/package/mr-emoji

shaypeleg1 commented 6 years ago

@Dipen-Dedania Thanks a lot. I've managed to reduce the bundle size significantly

EtienneLem commented 6 years ago

@mattbucci Interesting. We could have sets data in different files and import them in the main data file while handling non-existing files.

scttcper commented 6 years ago

I needed an emoji picker so I implemented this for Angular 4+. Took some time to slim down the emoji data while keeping functionality and all icon sets. https://typectrl.github.io/ngx-emoji-mart/

Its broken into two modules, one for the emoji component w/ data and one for the "emoji-mart".

module minified gzip
emoji 297K 57.7 kB
picker 30K 9.67 kB

The easiest area to shrink was changing the emoji data, especially the skin_variations.

viiiprock commented 6 years ago

Does anybody know how to deal with create-react-app? I don't want to reject . Thanks alot

Dipen-Dedania commented 6 years ago

@viiiprock https://www.npmjs.com/package/mr-emoji will work with create-react-app

kprocks86 commented 5 years ago

@Dipen-Dedania great work it will save 350kb 👍🏻

nolanlawson commented 5 years ago

This is being worked on in #258 and #260 but there is probably more work that could be done.

One trick you can use is to fetch() the JSON file rather than including it in your JS bundle. Assuming you cache it in IDB/Cache API or similar, you at least control when you pay the network/parse cost.

nolanlawson commented 5 years ago

I consider this largely fixed, especially given the separate nimble-picker file and the work in #258 and #260. In Pinafore using dist-modern and babel-plugin-transform-react-remove-prop-types, the nimble-picker.js is down to 36.25kB minified according to Webpack Bundle Analyzer (report).

I also load all.json as a separate file to avoid it bloating the JavaScript and to control the caching and parsing of the JSON. (The JSON file is 560K and 67.5K Brotli-compressed.) For an end-to-end example of how to do this, see this code.

shakesBeardZ commented 4 years ago

@Dipen-Dedania does support only apple emojis, it would be better if it allows the native emojis of the device