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

@@ -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())
+        $ele.addClass('graphviz')
-      if (!graphviz) throw Error('viz.js output empty graph')
+        $value.children().unwrap().unwrap()
-      $value.html(graphviz)
+      })
-
-      $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')

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',