Lazy-load highlight.js

This commit moves the import of highlight.js into a `require.ensure`
block, that is only executed when a code-block is actually present
in a note. Webpack automatically splits the library into a separate
chunk and loads that on demand.

The call to `hljs.listLanguages()` in `index.js` is also replaced
by a static list. This is important, as `index.js` would otherwise
need to import highlight.js, which would cause the quite big
library to be included into nearly every entrypoint, needlessly
increasing the transferred code size.

Signed-off-by: David Mehren <git@herrmehren.de>
This commit is contained in:
David Mehren 2021-06-06 22:20:29 +02:00
parent 5b8b76135b
commit 7ff685933e
No known key found for this signature in database
GPG key ID: 185982BA4C42B7C3
3 changed files with 201 additions and 39 deletions

View file

@ -248,7 +248,6 @@ module.exports = {
'bootstrap-validator',
'expose-loader?exposes=jsyaml!js-yaml',
'expose-loader?exposes=moment!moment',
'expose-loader?exposes=hljs!highlight.js',
'expose-loader?exposes=emojify!emojify.js',
'expose-loader?exposes=LZString!lz-string',
'flowchart.js',
@ -279,7 +278,6 @@ module.exports = {
'babel-polyfill',
'expose-loader?exposes=jsyaml!js-yaml',
'expose-loader?exposes=moment!moment',
'expose-loader?exposes=hljs!highlight.js',
'expose-loader?exposes=emojify!emojify.js',
'flowchart.js',
'js-sequence-diagrams',
@ -312,7 +310,6 @@ module.exports = {
'bootstrap-tooltip',
'expose-loader?exposes=jsyaml!js-yaml',
'expose-loader?exposes=moment!moment',
'expose-loader?exposes=hljs!highlight.js',
'expose-loader?exposes=emojify!emojify.js',
'flowchart.js',
'js-sequence-diagrams',
@ -342,7 +339,6 @@ module.exports = {
'socket.io-client': 'io',
'jquery': '$',
'moment': 'moment',
'highlight.js': 'hljs',
'select2': 'select2'
},