Reduce production bundle size

[Dipen-Dedania]

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?

[mattbucci]

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]

@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]

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

[EtienneLem]

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

[scttcper]

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]

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

[Dipen-Dedania]

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

[kprocks86]

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

[nolanlawson]

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]

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]

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