Bundle optimization

[edemaine]

https://blog.meteor.com/putting-your-app-on-a-diet-with-meteor-1-5s-bundle-visualizer-6845b685a119 https://blog.meteor.com/announcing-meteor-1-5-1-b65ecddf955b

~~(requires upgrading to Meteor 1.5, which we should do anyway)~~

meteor --extra-packages bundle-visualizer --production

• [x] Avoid use of both codemirror(/lib/codemirror.js) [requires modifying sharejs-codemirror] and codemirror/src (~~needed for drag behavior~~)
• [x] Avoid duplication of node_modules/jquery/dist/jquery.js (needed by bootstrap-slider) and (jquery)/node_modules/meteor/jquery/jquery.js (needed by Blaze) — turned out to suffice to just upgrade jquery Meteor package (forcefully!)
• [x] highlight.js is 789kB! Should load languages only as needed.
• [ ] Perhaps delay loading highlight.js (but now <20kB), markdown-it (48kB), and katex (253kB) until rendering messages? But these are needed a lot.
• [x] meteor/edemaine:sharejs is 859kB, mostly because of included packages -- actually, seemingly unneeded NPM dependencies. Can we pare this down?
• [x] Switch from sanitize-html (246kB) to DOMPurify (17kB) (#508)
• [ ] codemirror (335kB) could wait until editing a message
• [ ] Load codemirror/keymap/vim.js (81kB) only when keymap is needed. Similarly for emacs.
• [x] moment is 53kB, plus 11kB for timezones.json. The moment library is discouraged for client-side use. ~~date-fns~~ day.js (6.6kB) seems like a good drop-in alternative, in particular using the new Intl interface for timezones
  • [ ] Can we avoid creating/loading timezones.json? Or at least should base on something other than moment-timezone, e.g. automatically updated tzdb or timezones list
• [ ] Move relevant lib code to server so it's not seen by client. Although Meteor 2's eventual tree shaking may obviate the need for this...
  • [x] notifications
• [ ] client code splitting via Meteor react-loadable
• [ ] accounts-ui-bootstrap is 119kB, and can be replaced once we move away from Blaze (another 48kB) (#487)

[edemaine]

Tried it out. Spotted an excess sharejs-ace editor which we no longer need (since the move to Codemirror), but not much else. Bundle is now 3.6MB.

[edemaine]

We can get a lot more benefit via dynamic imports. I've done this so far with infrequently used jszip and chart.js (reducing to 3.43MB), but if we do it for more modules (e.g. the biggest one, sharejs), then we should get faster initial loads and better caching of code. Unfortunately this seems hard with Meteor packages...

[edemaine]

Highlight.js paring should be possible by rendering markdown, reactively using libraries available and requesting those missing for reactive rerender.

The ES6 Modules section of this page shows how to dynamically import languages and register them.

(now done)

Could do the same with KaTeX (like Comingle) but that seems more important...

[edemaine]

With highlight.js, sharejs, codemirror, and jquery fixes in, now down to 2.82MB! (Previously around 4.5MB.)

[edemaine]

Down to 2.66MB via DOMPurify, dayjs, and moving notifications server code out of lib. (There was also some growth since last measurement, from solid/solid-bootstrap.)