From efd62bd1ca5550080ccf1254ecb95c5cb6afd983 Mon Sep 17 00:00:00 2001
From: Wu Cheng-Han <jacky_cute0808@hotmail.com>
Date: Sat, 26 Nov 2016 23:24:59 +0800
Subject: [PATCH] Optimize slide page resource packing and load orders, fix
 possible wrong chunks orders and font awesome version

---
 public/js/slide.js     |  1 -
 public/views/html.hbs  |  2 +-
 public/views/slide.ejs | 49 +++++++++++++++---------------------------
 webpackBaseConfig.js   | 49 +++++++++++++++++++++++++++++++++++++++---
 4 files changed, 64 insertions(+), 37 deletions(-)

diff --git a/public/js/slide.js b/public/js/slide.js
index 8d45219..fa4adcb 100644
--- a/public/js/slide.js
+++ b/public/js/slide.js
@@ -1,6 +1,5 @@
 require('../css/extra.css');
 require('../css/site.css');
-require('../css/slide.css');
 
 var extraModule = require('./extra');
 var md = extraModule.md;
diff --git a/public/views/html.hbs b/public/views/html.hbs
index 2e45707..46b1b92 100644
--- a/public/views/html.hbs
+++ b/public/views/html.hbs
@@ -16,7 +16,7 @@
     <link rel="apple-touch-icon" href="{{{url}}}/apple-touch-icon.png">
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha256-916EbMg70RQy9LHiGkXzG8hSg9EdNy97GazNG/aiY1w=" crossorigin="anonymous" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" integrity="sha256-AIodEDkC8V/bHBkfyxzolUMw57jeQ9CauwhVW6YJ9CA=" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" integrity="sha256-3iu9jgsy9TpTwXKb7bNQzqWekRX7pPK+2OLj3R922fo=" crossorigin="anonymous" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css" integrity="sha256-QiWfLIsCT02Sdwkogf6YMiQlj4NE84MKkzEMkZnMGdg=" crossorigin="anonymous" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/themes/prism.min.css" integrity="sha256-vtR0hSWRc3Tb26iuN2oZHt3KRUomwTufNIf5/4oeCyg=" crossorigin="anonymous" />
diff --git a/public/views/slide.ejs b/public/views/slide.ejs
index cd3be9a..bfc5edd 100644
--- a/public/views/slide.ejs
+++ b/public/views/slide.ejs
@@ -15,31 +15,23 @@
         <link rel="icon" type="image/png" href="<%- url %>/favicon.png">
         <link rel="apple-touch-icon" href="<%- url %>/apple-touch-icon.png">
         <% if(useCDN) { %>
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" integrity="sha256-AIodEDkC8V/bHBkfyxzolUMw57jeQ9CauwhVW6YJ9CA=" crossorigin="anonymous" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" integrity="sha256-3iu9jgsy9TpTwXKb7bNQzqWekRX7pPK+2OLj3R922fo=" crossorigin="anonymous" />
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css" integrity="sha256-QiWfLIsCT02Sdwkogf6YMiQlj4NE84MKkzEMkZnMGdg=" crossorigin="anonymous" />
-        <link rel="stylesheet" href="<%- url %>/css/google-font.css">
+        <link rel="stylesheet" href='<%- url %>/build/emojify.js/dist/css/basic/emojify.min.css'>
+        <%- include build/slide-header %>
         <% } else { %>
-        <link rel="stylesheet" href='<%- url %>/vendor/font-awesome/css/font-awesome.min.css'>
-        <link rel="stylesheet" href="<%- url %>/vendor/Ionicons/css/ionicons.min.css">
-        <link rel="stylesheet" href="<%- url %>/vendor/octicons/octicons/octicons.css">
-        <link rel="stylesheet" href="<%- url %>/css/font.css">
+        <link rel="stylesheet" href='<%- url %>/build/emojify.js/dist/css/basic/emojify.min.css'>
+        <%- include build/slide-pack-header %>
         <% } %>
-        <link rel="stylesheet" href='<%- url %>/vendor/bootstrap/tooltip.min.css'>
 
+        <!-- For reveal.js -->
         <link rel="stylesheet" href="<%- url %>/vendor/reveal.js/css/reveal.css">
         <link rel="stylesheet" href="<%- url %>/vendor/reveal.js/css/theme/black.css" id="theme">
-
         <!-- For syntax highlighting -->
         <link rel="stylesheet" href="<%- url %>/vendor/reveal.js/lib/css/zenburn.css">
-
-        <link rel="stylesheet" href='<%- url %>/css/github-extract.css'>
-        <link rel="stylesheet" href='<%- url %>/css/gist.css'>
-        <link rel="stylesheet" href="<%- url %>/css/mermaid.css">
-        <link rel="stylesheet" href='<%- url %>/css/markdown.css'>
-        <link rel="stylesheet" href='<%- url %>/vendor/emojify.js/dist/css/basic/emojify.min.css'>
-
-        <%- include build/slide-header %>
+        <!-- For overwrite reveal.js -->
+        <link rel="stylesheet" href="<%- url %>/css/slide.css">
 
         <!-- Printing and PDF exports -->
 		<script>
@@ -96,33 +88,26 @@
         <% if(useCDN) { %>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.3.0/lib/js/head.min.js" integrity="sha256-+09kLhwACKXFPDvqo4xMMvi4+uXFsRZ2uYGbeN1U8sI=" crossorigin="anonymous"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.3.0/js/reveal.min.js" integrity="sha256-lvaInSKflJWLPqf5N5oHr/UZFwXKD6gckerdwoHqECY=" crossorigin="anonymous"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.3.1/velocity.min.js" integrity="sha256-zt0EvRuKYSkXKgIFLrJIYeZsBjIZLel9UThCm5GI6io=" crossorigin="anonymous" defer></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha256-U5ZEeKfGNOja007MMD3YBI0A3OSZOQbeG6z2f2Y0hu8=" crossorigin="anonymous" defer></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js" integrity="sha256-jnOjDTXIPqall8M0MyTSt98JetJuZ7Yu+1Jm7hLTF7U=" crossorigin="anonymous" defer></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.6.1/js-yaml.min.js" integrity="sha256-tvANaUGcQTLkCS9wHnLZhBFVfIWQJpm98WOpykjD+eo=" crossorigin="anonymous" defer></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js" integrity="sha256-yYfngbEKv4RENfGDvNUqJTqGFcKf31NJEe9OTnnMH3Y=" crossorigin="anonymous" defer></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/config/TeX-AMS-MML_HTMLorMML.js" integrity="sha256-immzXfCGLhnx3Zfi9F/dUcqxEM8K3o3oTFy9Bh6HCwg=" crossorigin="anonymous" defer></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment-with-locales.min.js" integrity="sha256-J5wam9fTysK5BqYlUUBjbomFslRxkLgwB9AhnVWsj1Q=" crossorigin="anonymous" defer></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/6.0.0/mermaid.min.js" integrity="sha256-Yabf6Mj1TPKd6h4F6z5xRR1/2son0Wg8NhvjYnhcQcY=" crossorigin="anonymous" defer></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/js/emojify.min.js" integrity="sha256-VAB5tAlKBvgaxw8oJ1crWMVbdmBVl4mP/2M8MNRl+4E=" crossorigin="anonymous" defer></script>
-        <% } else { %>
-        <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>
-        <script src="<%- url %>/vendor/js-yaml/dist/js-yaml.min.js" defer></script>
-        <script src="<%- url %>/vendor/MathJax/MathJax.js" defer></script>
-        <script src="<%- url %>/vendor/MathJax/config/TeX-AMS-MML_HTMLorMML.js" defer></script>
-        <script src="<%- url %>/vendor/moment/min/moment-with-locales.js" defer></script>
-        <script src="<%- url %>/vendor/mermaid/dist/mermaid.min.js" defer></script>
-        <script src="<%- url %>/vendor/emojify.js/dist/js/emojify.min.js" defer></script>
-        <% } %>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha256-KM512VNnjElC30ehFwehXjx1YCHPiQkOPmqnrWtpccM=" crossorigin="anonymous"></script>
-        <script src="<%- url %>/vendor/bootstrap/tooltip.min.js" defer></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js" integrity="sha256-rMOSOM5HDzVEMoVZTv2189+RKSTSgY5ZKfTfap7q2zE=" crossorigin="anonymous" defer></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/highlight.min.js" integrity="sha256-s63qpgPYoQk+wv3U6WZqioVJrwFNBTgD4dkeegLuwvo=" crossorigin="anonymous" defer></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/gist-embed/2.5/gist-embed.min.js" integrity="sha256-hmjTba0C6gzDF3N0+Opwd/Jxk4e8ypWrcBw/57rY0Dk=" crossorigin="anonymous" defer></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.min.js" integrity="sha256-KteOoEtQ75FeAFFOTJZlvNt0iJ8NMusVDESd5jlwKEQ=" crossorigin="anonymous" defer></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/gist-embed/2.6.0/gist-embed.min.js" integrity="sha256-KyF2D6xPIJUW5sUDSs93vWyZm+1RzIpKCexxElmxl8g=" crossorigin="anonymous" defer></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/viz.js/1.3.0/viz.js" integrity="sha256-FGmk+pMdOeRk4xTJ168rnGms1KjYi6jYMYaNEmSsvuQ=" crossorigin="anonymous" defer></script>
         <%- include build/slide-scripts %>
+        <% } else { %>
+        <script src="<%- url %>/build/MathJax/MathJax.js" defer></script>
+        <script src="<%- url %>/build/MathJax/config/TeX-AMS-MML_HTMLorMML.js" defer></script>
+        <%- include build/slide-pack-scripts %>
+        <% } %>
     </body>
 </html>
 
diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js
index ba5db4b..6c83f82 100644
--- a/webpackBaseConfig.js
+++ b/webpackBaseConfig.js
@@ -16,6 +16,7 @@ module.exports = {
             "moment": "moment",
             "Handlebars": "handlebars"
         }),
+        new webpack.optimize.OccurrenceOrderPlugin(true),
         new webpack.optimize.CommonsChunkPlugin({
             names: ["cover", "index", "pretty", "slide", "vendor"],
             children: true,
@@ -95,14 +96,21 @@ module.exports = {
             filename: path.join(__dirname, 'public/views/build/pretty-pack-scripts.ejs'),
             inject: false
         }),
+        new HtmlWebpackPlugin({
             template: 'public/views/includes/header.ejs',
-            chunks: ['vendor', 'slide'],
+            chunks: ['font', 'slide-styles', 'slide'],
             filename: path.join(__dirname, 'public/views/build/slide-header.ejs'),
             inject: false
         }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/header.ejs',
+            chunks: ['font-pack', 'slide-styles-pack', 'slide-styles', 'slide'],
+            filename: path.join(__dirname, 'public/views/build/slide-pack-header.ejs'),
+            inject: false
+        }),
         new HtmlWebpackPlugin({
             template: 'public/views/includes/scripts.ejs',
-            chunks: ['vendor', 'slide'],
+            chunks: ['slide'],
             filename: path.join(__dirname, 'public/views/build/slide-scripts.ejs'),
             inject: false
         }),
@@ -133,7 +141,6 @@ module.exports = {
     ],
 
     entry: {
-        slide: path.join(__dirname, 'public/js/slide.js'),
         font: path.join(__dirname, 'public/css/google-font.css'),
         "font-pack": path.join(__dirname, 'public/css/font.css'),
         common: [
@@ -266,6 +273,40 @@ module.exports = {
             path.join(__dirname, 'public/js/reveal-markdown.js'),
             path.join(__dirname, 'public/js/pretty.js')
         ],
+        slide: [
+            "expose?filterXSS!xss",
+            "flowchart.js",
+            "js-sequence-diagrams",
+            path.join(__dirname, 'public/js/reveal-markdown.js'),
+            path.join(__dirname, 'public/js/slide.js')
+        ],
+        "slide-styles": [
+            path.join(__dirname, 'public/css/github-extract.css'),
+            path.join(__dirname, 'public/css/mermaid.css'),
+            path.join(__dirname, 'public/css/markdown.css')
+        ],
+        "slide-styles-pack": [
+            path.join(__dirname, 'node_modules/font-awesome/css/font-awesome.min.css'),
+            path.join(__dirname, 'node_modules/ionicons/css/ionicons.min.css'),
+            path.join(__dirname, 'node_modules/octicons/octicons/octicons.css'),
+            path.join(__dirname, 'public/vendor/bootstrap/tooltip.min.css')
+        ],
+        "slide-pack": [
+            "expose?jsyaml!js-yaml",
+            "script!mermaid",
+            "expose?moment!moment",
+            "script!handlebars",
+            "expose?hljs!highlight.js",
+            "expose?emojify!emojify.js",
+            "expose?filterXSS!xss",
+            "script!gist-embed",
+            "flowchart.js",
+            "js-sequence-diagrams",
+            "expose?Viz!viz.js",
+            "headjs",
+            "expose?Reveal!reveal.js",
+            path.join(__dirname, 'public/js/reveal-markdown.js'),
+            path.join(__dirname, 'public/js/slide.js')
         ]
     },
 
@@ -293,6 +334,8 @@ module.exports = {
             handlebars: path.join(__dirname, 'node_modules/handlebars/dist/handlebars.min.js'),
             "jquery-ui-resizable": path.join(__dirname, 'public/vendor/jquery-ui/jquery-ui.min.js'),
             "gist-embed": path.join(__dirname, 'node_modules/gist-embed/gist-embed.min.js'),
+            "bootstrap-tooltip": path.join(__dirname, 'public/vendor/bootstrap/tooltip.min.js'),
+            "headjs": path.join(__dirname, 'node_modules/reveal.js/lib/js/head.min.js')
         }
     },