github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-01-06 04:11:48 +00:00
Code Issues Projects Releases Packages Wiki Activity

Lazy-load viz.js

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

To ensure that graphviz code-blocks are not treated as normal
code-blocks while the chunk is loading, a corresponding check is added
to `finishView`.

The library is also removed from the Webpack config file, as it only
is used at one place in extra.js, which is handled by Webpack
without any extra config.

Signed-off-by: David Mehren <git@herrmehren.de>
This commit is contained in:
David Mehren 2021-06-06 22:08:27 +02:00
parent 1c023e7881
commit 5b8b76135b
No known key found for this signature in database
GPG key ID: 185982BA4C42B7C3
2 changed files with 9 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
public/js/extra.js
View file

@ -31,7 +31,6 @@ require('prismjs/components/prism-gherkin')
require('./lib/common/login')
require('./locale')
require('../vendor/md-toc')
const Viz = require('viz.js')
const ui = getUIElements()
// auto update last change
@ -367,13 +366,15 @@ export function finishView (view) {
try {
$value = $(value)
const $ele = $(value).parent().parent()
require.ensure([], function (require) {
const Viz = require('viz.js')
const graphviz = Viz($value.text())
if (!graphviz) throw Error('viz.js output empty graph')
$value.html(graphviz)
const graphviz = Viz($value.text())
if (!graphviz) throw Error('viz.js output empty graph')
$value.html(graphviz)
$ele.addClass('graphviz')
$value.children().unwrap().unwrap()
$ele.addClass('graphviz')
$value.children().unwrap().unwrap()
})
} catch (err) {
$value.unwrap()
$value.parent().append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)
@ -496,7 +497,7 @@ export function finishView (view) {
const langDiv = $(value)
if (langDiv.length > 0) {
const reallang = langDiv[0].className.replace(/hljs|wrap/g, '').trim()
if (reallang === 'mermaid' || reallang === 'abc') {
if (reallang === 'mermaid' || reallang === 'abc' || reallang === 'graphviz') {
return
}
const codeDiv = langDiv.find('.code')

4
webpack.common.js
View file

@ -253,7 +253,6 @@ module.exports = {
'expose-loader?exposes=LZString!lz-string',
'flowchart.js',
'js-sequence-diagrams',
'expose-loader?exposes=Viz!viz.js',
'expose-loader?exposes=io!socket.io-client',
'expose-loader?exposes=RevealMarkdown!reveal-markdown',
path.join(__dirname, 'public/js/index.js')
@ -284,7 +283,6 @@ module.exports = {
'expose-loader?exposes=emojify!emojify.js',
'flowchart.js',
'js-sequence-diagrams',
'expose-loader?exposes=Viz!viz.js',
'expose-loader?exposes=RevealMarkdown!reveal-markdown',
path.join(__dirname, 'public/js/pretty.js')
],
@ -318,7 +316,6 @@ module.exports = {
'expose-loader?exposes=emojify!emojify.js',
'flowchart.js',
'js-sequence-diagrams',
'expose-loader?exposes=Viz!viz.js',
'expose-loader?exposes=Reveal!reveal.js',
'expose-loader?exposes=RevealMarkdown!reveal-markdown',
path.join(__dirname, 'public/js/slide.js')
@ -342,7 +339,6 @@ module.exports = {
},
externals: {
'viz.js': 'Viz',
'socket.io-client': 'io',
'jquery': '$',
'moment': 'moment',