From 5b8b76135bf660ba8b75dc223ae22cc81c3f4ebe Mon Sep 17 00:00:00 2001
From: David Mehren <git@herrmehren.de>
Date: Sun, 6 Jun 2021 22:08:27 +0200
Subject: [PATCH] Lazy-load viz.js

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>
---
 public/js/extra.js | 17 +++++++++--------
 webpack.common.js  |  4 ----
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/public/js/extra.js b/public/js/extra.js
index ba6ab12a6..d247df018 100644
--- a/public/js/extra.js
+++ b/public/js/extra.js
@@ -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')
diff --git a/webpack.common.js b/webpack.common.js
index 4a10ef9c9..199e209d4 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -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',