@zooniverse/react-components: improvements to the output bundle size

[eatyourgreens]

• add webpack bundle analyser
• import only the bell and envelope icons from Font Awesome.
• import only the lodash utilities that are used in the code.
• mark i18next and react-18next as external dependencies in libraries.
• update tests to query elements by their translation keys.
• replace mime-types with mime/lite.
• replace @fortawesome/react-fontawesome and @fortawesome/fontawesome-svg-core with Grommet Icons Blank.

Should reduce the build size by ~350k.

Package

lib-classifier
lib-react-components

Linked Issue and/or Talk Post

• towards lib-react-components is over 700k of JavaScript #2534. The library is still ~500k in size, but the changes here should knock almost 350k off the build size. Previously, it was ~850k.

How to Review

Build the library with yarn build and look at the bundle size (dist/main.js). The built library should still work when imported into the classifier and NextJS apps.

Checklist

PR Creator - Please cater the checklist to fit the review needed for your code changes.
PR Reviewer - Use the checklist during your review. Each point should be checkmarked or discussed before PR approval.

General

• Tests are passing locally and on Github
• Documentation is up to date and changelog has been updated if appropriate
• You can yarn panic && yarn bootstrap or docker-compose up --build and FEM works as expected
• FEM works in all major desktop browsers: Firefox, Chrome, Edge, Safari (Use Browserstack account as needed)
• FEM works in a mobile browser

General UX

Example Staging Project: i-fancy-cats

• All pages of a FEM project load: Home Page, Classify Page, and About Pages
• Can submit a classification
• Can sign-in and sign-out
• The component is accessible
  • Can be used with a screen reader BBC guide to VoiceOver
  • Can be used from the keyboard WebAIM guide to keyboard testing
  • It is passing accessibility checks in the storybook

[coveralls]

Coverage decreased (-0.02%) to 83.513% when pulling 4053d9f on react-components-performance into fc698a6 on master.

[eatyourgreens]

Grommet Icons has a bell icon (Notifications) and an envelope icon (MailItem.) I’m not sure why we import Font Awesome and Grommet Icons.

[goplayoutside3]

Grommet Icons has a bell icon (Notifications) and an envelope icon (MailItem.) I’m not sure why we import Font Awesome and Grommet Icons.

I assume those are the only two icons that use Font Awesome in lib-react-components. Could we replace them in this PR with Grommet icons to completely remove Font Awesome?

[eatyourgreens]

According to #275 this is for parity with the old header, but it seems like a lot of code for two icons.

[goplayoutside3]

Ah I see that makes sense. Agreed that it's not ideal to keep those icons around though.

[eatyourgreens]

It's tempting to simply copy the SVG paths for those two icons into the code for the header menu.

I'm pushing up another change, which loads in i18next and react-i18next as external modules. That lowers the build size from ~860k to ~710k. I think the current build might be including those three times: once in this library, once in the classifier, and once in the project app.

The classifier build is also 1.5MB, which leads to very heavy page weights in the project app.

[eatyourgreens]

Tests that expect labels like 'Add to favourites' are failing now because the default labels in the output library will be the translation keys. Easy enough to fix.

[eatyourgreens]

Localised text still works when I build and run the project app locally. Tested with PH-TESS in English and Spanish.

[eatyourgreens]

Replacing mime-db with mime/lite removes another ~150k of unnecessary code.

[eatyourgreens]

I've switched the ZooHeader to use Grommet Icons' Blank for the mail and notifications icons. Removing the Font Awesome packages knocks another 50k off the bunde size. Now down from ~850k to ~500k, which still triggers the webpack build warnings but is a massive improvement in the library size.

Most of that 500k is probably Markdownz, so we could consider splitting that out of the main library for consumers that don't use Zooniverse markdown.

[eatyourgreens]

I think the problem with documenting peer deps in the Readme is versioning. Mapping Viz uses either version 1.0 or 1.1. The version here is 1.2 so changes here won’t be relevant to Mapping Viz at the moment.

Looking at other libraries we use, like Grommet, peer dependencies aren’t explicitly spelled out in their Readmes either.

I’m still not sure whether the i18next packages should be bundled with the standalone library. How does Mapping Viz handle localisation?

[eatyourgreens]

I'm going to close this in favour of #3900, which is producing smaller, faster builds.