From 56c5378939c6498d0440b3ed76a604523678073f Mon Sep 17 00:00:00 2001
From: Yukai Huang <yukaihuangtw@gmail.com>
Date: Tue, 11 Oct 2016 17:15:06 +0800
Subject: [PATCH] Optimize viz.js async rendering through webpack chunk

---
 public/js/extra.js      | 30 +++++++++++++++++-------------
 public/js/index.js      |  6 ------
 public/views/foot.ejs   |  2 +-
 public/views/index.ejs  |  2 +-
 public/views/pretty.ejs |  2 +-
 public/views/slide.ejs  |  2 +-
 webpack.production.js   |  9 +++++----
 webpackBaseConfig.js    | 18 ++++++++++--------
 8 files changed, 36 insertions(+), 35 deletions(-)

diff --git a/public/js/extra.js b/public/js/extra.js
index 329aa15..e133a81 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();
+    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);
+                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) {
diff --git a/public/js/index.js b/public/js/index.js
index 4bce2ff..2d3c296 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -1,9 +1,3 @@
-/* include jquery ui */
-require('jquery-ui/ui/widgets/resizable');
-require('jquery-ui/ui/widgets/tooltip');
-require('jquery-ui/ui/widgets/controlgroup');
-require('jquery-ui/ui/widgets/autocomplete');
-
 /* jquery and jquery plugins */
 require('../vendor/showup/showup');
 
diff --git a/public/views/foot.ejs b/public/views/foot.ejs
index 4a9b175..adab9d1 100644
--- a/public/views/foot.ejs
+++ b/public/views/foot.ejs
@@ -21,7 +21,7 @@
 <script src="<%- url %>/vendor/mermaid/dist/mermaid.min.js" defer></script>
 <% } %>
 <script src="<%- url %>/vendor/Idle.Js/build/idle.min.js" defer></script>
-<script src="<%- url %>/build/vendor.bundle.js" defer></script>
+<script src="<%- url %>/build/vendor.js" defer></script>
 <!--codemirror-->
 <script src="<%- url %>/vendor/codemirror/codemirror.min.js" defer></script>
 <script src="<%- url %>/vendor/inlineAttachment/inline-attachment.js" defer></script>
diff --git a/public/views/index.ejs b/public/views/index.ejs
index c7bea34..c00623c 100644
--- a/public/views/index.ejs
+++ b/public/views/index.ejs
@@ -185,7 +185,7 @@
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="<%- url %>/build/vendor.bundle.js" defer></script>
+    <script src="<%- url %>/build/vendor.js" defer></script>
     <% if(useCDN) { %>
 	<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" defer></script>
     <script src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js" defer></script>
diff --git a/public/views/pretty.ejs b/public/views/pretty.ejs
index 6f13155..4cfbdb0 100644
--- a/public/views/pretty.ejs
+++ b/public/views/pretty.ejs
@@ -90,7 +90,7 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment-with-locales.min.js" defer></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/6.0.0/mermaid.min.js" defer></script>
 <% } else { %>
-<script src="<%- url %>/build/vendor.bundle.js" defer></script>
+<script src="<%- url %>/build/vendor.js" defer></script>
 <script src="<%- url %>/vendor/js-yaml/dist/js-yaml.min.js" defer></script>
 <script type="text/javascript" src="<%- url %>/vendor/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML" defer></script>
 <script src="<%- url %>/vendor/moment/min/moment-with-locales.js" defer></script>
diff --git a/public/views/slide.ejs b/public/views/slide.ejs
index b0c5ddb..b3212f4 100644
--- a/public/views/slide.ejs
+++ b/public/views/slide.ejs
@@ -87,7 +87,7 @@
         <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment-with-locales.min.js" defer></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/6.0.0/mermaid.min.js" defer></script>
         <% } else { %>
-        <script src="<%- url %>/build/vendor.bundle.js" defer></script>
+        <script src="<%- url %>/build/vendor.js" defer></script>
         <script src="<%- url %>/vendor/reveal.js/lib/js/head.min.js"></script>
         <script src="<%- url %>/vendor/reveal.js/js/reveal.js"></script>
         <script src="<%- url %>/vendor/velocity/velocity.min.js" defer></script>
diff --git a/webpack.production.js b/webpack.production.js
index f4125ce..1c54ae3 100644
--- a/webpack.production.js
+++ b/webpack.production.js
@@ -17,10 +17,11 @@ module.exports = Object.assign({}, baseConfig, {
         }),
         new ExtractTextPlugin("[name].css"),
         new webpack.optimize.CommonsChunkPlugin({
-            name: "vendor",
-            filename: "vendor.bundle.js",
-            minChunks: Infinity,
-        }),
+            name: ["vendor", "public", "slide", "locale"],
+            async: true,
+            filename: '[name].js',
+            minChunks: Infinity
+        })
         new webpack.DefinePlugin({
             'process.env': {
                 'NODE_ENV': JSON.stringify('production')
diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js
index 6d99381..e2d58f4 100644
--- a/webpackBaseConfig.js
+++ b/webpackBaseConfig.js
@@ -17,9 +17,10 @@ module.exports = {
         }),
         new ExtractTextPlugin("[name].css"),
         new webpack.optimize.CommonsChunkPlugin({
-            name: "vendor",
-            filename: "vendor.bundle.js",
-            minChunks: Infinity,
+            name: ["vendor", "public", "slide", "locale"],
+            async: true,
+            filename: '[name].js',
+            minChunks: Infinity
         })
     ],
 
@@ -33,9 +34,12 @@ module.exports = {
             "jquery-textcomplete",
             "jquery-mousewheel",
             "jquery-scrollspy/jquery-scrollspy",
+            "jquery-ui/ui/widgets/resizable",
+            "jquery-ui/ui/widgets/tooltip",
+            "jquery-ui/ui/widgets/controlgroup",
+            "jquery-ui/ui/widgets/autocomplete",
             "expose?LZString!lz-string",
             "expose?filterXSS!xss",
-            "expose?Viz!viz.js",
             "js-url",
             "bootstrap"
         ]
@@ -43,6 +47,7 @@ module.exports = {
 
     output: {
         path: path.join(__dirname, 'public/build'),
+        publicPath: '/build/',
         filename: '[name].js'
     },
 
@@ -51,10 +56,7 @@ module.exports = {
             path.resolve(__dirname, 'src'),
             path.resolve(__dirname, 'node_modules')
         ],
-        extensions: ["", ".js"],
-        alias: {
-            'jquery-ui': 'jquery-ui/ui/widgets'
-        }
+        extensions: ["", ".js"]
     },
 
     module: {