Dynamic importing of CodeMirror modes at runtime

[niik]

When we initially shipped syntax highlighted diffs we supported 18 languages and formats. Since then and thanks to community contributions the list has grown to 36 with more on the way.

As the list of supported languages has grown so has the bundle size of the highlighter module and it sits at about 0.5Mb (unminimized) at the moment. Since that file has to be loaded, parsed, and initialized for each highlighter web worker we spin up (in normal usage 2 for the life time of the application) this creates unnecessary overhead when most users rarely combine more than a few languages in their day to day work.

This PR leverages chunk splitting in webpack 4 to split out each language (or technically each CodeMirror mode) into its own, separate javascript file that then gets loaded, at runtime, when that particular language mode is needed through the importScript web worker call.

This ultimately leads to less code being loaded into the runtime and faster initial highlighting. Instead of loading 0.5Mb we're now loading the bare minimum (~16kb) plus whatever mode is required.

Highlighter bundle before

Highlighter bundle after

Performance

Essentially we sacrifice a little bit (in absolute numbers) of performance whenever a new language is loaded in exchaneg for a big gain in initial load time and zero overhead of adding new language modes in the future. These timings are all taken in dev mode on my early 2015 macbook 12"

Scenario	Monolith	Split	Delta (lower is better)
First highlighting of language 1	261ms	137ms	52%
First highlighting of language 2	7ms	23ms	328%
Second highlighting of language 1	6ms	4ms	No significant change

[agisilaos]

@niik As I can understand this will change the way for someone to add support for a new programming language? So the docs need to be updated as well in this PR? 🤔

[say25]

@niik and @shiftkey any status on this. There are a couple extensions I'd like to add without introducing merge conflicts and what not. No trying to be rude just wondering/asking for a rough timeline.

[shiftkey]

@say25 I probably won't get a chance to start reviewing it until next week

Docs

[iAmWillShepherd]

Does this change how community members can add additional languages? If so, could we also get the docs updated to reflect the new way of adding language support?

[niik]

@niik As I can understand this will change the way for someone to add support for a new programming language? So the docs need to be updated as well in this PR? 🤔

I don't believe we have any docs that goes into the specifics of how to add a new language. I assume that contributors who've added a theme have probably just copied and pasted a previous mode that was already in the highlighter/index.tsx and tweaked it. If someone would like to contribute more docs around this I'd be 😍 but I'm gonna say that it's out of scope for this particular PR.

[niik]

Ready for another look 🙇

[saul]

@niik the documentation is here: https://github.com/desktop/desktop/blob/master/docs/technical/syntax-highlighting.md#i-want-to-add-my-favorite-language