Optimize viz.js async rendering through webpack chunk

1 files changed, 18 insertions, 14 deletions

diff --git a/public/js/extra.js b/public/js/extra.js
index 329aa153..e133a810 100644
--- a/public/js/extra.js
+++ b/public/js/extra.js
@@ -288,21 +288,25 @@ function finishView(view) {
         }
     });
     //graphviz
-    var graphvizs = view.find(".graphviz.raw").removeClass("raw");
-    graphvizs.each(function (key, value) {
-        try {
-            var $value = $(value);
-            var $ele = $(value).parent().parent();
-
-            var graphviz = Viz($value.text());
-            $value.html(graphviz);
+    require.ensure(["viz.js"], function(require) {
+        var Viz = require("viz.js");
+        var graphvizs = view.find(".graphviz.raw").removeClass("raw");
+        graphvizs.each(function (key, value) {
+            try {
+                var $value = $(value);
+                var $ele = $(value).parent().parent();
+
+                var graphviz = Viz($value.text());
+                $value.html(graphviz);
+
+                $ele.addClass('graphviz');
+                $value.children().unwrap().unwrap();
+            } catch (err) {
+                console.warn(err);
+            }
+        });
 
-            $ele.addClass('graphviz');
-            $value.children().unwrap().unwrap();
-        } catch (err) {
-            console.warn(err);
-        }
-    });
+    })
     //mermaid
     var mermaids = view.find(".mermaid.raw").removeClass("raw");
     mermaids.each(function (key, value) {