Optimize pretty page resource packing and load orders

2 files changed, 63 insertions, 29 deletions

diff --git a/public/views/pretty.ejs b/public/views/pretty.ejs
index f810a5a9..2ba49e89 100644
--- a/public/views/pretty.ejs
+++ b/public/views/pretty.ejs
@@ -18,22 +18,16 @@
     <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/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.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/pretty-header %>
 	<% } else { %>
-    <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/pretty-pack-header %>
 	<% } %>
-	<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='<%- 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/pretty-header %>
     <%- include polyfill %>
 </head>
 
@@ -82,28 +76,24 @@
     MathJax.Hub.Config({ messageStyle: "none", skipStartupTypeset: true ,tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']], processEscapes: true }});
 </script>
 <% if(useCDN) { %>
+<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/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="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/handlebars.js/4.0.5/handlebars.min.js" integrity="sha256-rMOSOM5HDzVEMoVZTv2189+RKSTSgY5ZKfTfap7q2zE=" 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/highlight.js/9.7.0/highlight.min.js" integrity="sha256-s63qpgPYoQk+wv3U6WZqioVJrwFNBTgD4dkeegLuwvo=" 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/pretty-scripts %>
-<script src="<%- url %>/js/reveal-markdown.js" defer></script>
+<% } 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/pretty-pack-scripts %>
+<% } %>
 <%- include ga %>
diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js
index 1aaf6c75..ba5db4b7 100644
--- a/webpackBaseConfig.js
+++ b/webpackBaseConfig.js
@@ -71,18 +71,30 @@ module.exports = {
             filename: path.join(__dirname, 'public/views/build/cover-pack-scripts.ejs'),
             inject: false
         }),
+        new HtmlWebpackPlugin({
             template: 'public/views/includes/header.ejs',
-            chunks: ['vendor', 'pretty'],
+            chunks: ['font', 'pretty-styles', 'pretty'],
             filename: path.join(__dirname, 'public/views/build/pretty-header.ejs'),
             inject: false
         }),
         new HtmlWebpackPlugin({
+            template: 'public/views/includes/header.ejs',
+            chunks: ['font-pack', 'pretty-styles-pack', 'pretty-styles', 'pretty'],
+            filename: path.join(__dirname, 'public/views/build/pretty-pack-header.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
             template: 'public/views/includes/scripts.ejs',
-            chunks: ['vendor', 'pretty'],
+            chunks: ['pretty'],
             filename: path.join(__dirname, 'public/views/build/pretty-scripts.ejs'),
             inject: false
         }),
         new HtmlWebpackPlugin({
+            template: 'public/views/includes/scripts.ejs',
+            chunks: ['common', 'pretty-pack'],
+            filename: path.join(__dirname, 'public/views/build/pretty-pack-scripts.ejs'),
+            inject: false
+        }),
             template: 'public/views/includes/header.ejs',
             chunks: ['vendor', 'slide'],
             filename: path.join(__dirname, 'public/views/build/slide-header.ejs'),
@@ -121,7 +133,6 @@ module.exports = {
     ],
 
     entry: {
-        pretty: path.join(__dirname, 'public/js/pretty.js'),
         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'),
@@ -222,6 +233,39 @@ module.exports = {
             path.join(__dirname, 'public/js/reveal-markdown.js'),
             path.join(__dirname, 'public/js/index.js')
         ],
+        pretty: [
+            "expose?filterXSS!xss",
+            "flowchart.js",
+            "js-sequence-diagrams",
+            path.join(__dirname, 'public/js/reveal-markdown.js'),
+            path.join(__dirname, 'public/js/pretty.js')
+        ],
+        "pretty-styles": [
+            path.join(__dirname, 'public/css/github-extract.css'),
+            path.join(__dirname, 'public/css/mermaid.css'),
+            path.join(__dirname, 'public/css/markdown.css')
+        ],
+        "pretty-styles-pack": [
+            path.join(__dirname, 'node_modules/bootstrap/dist/css/bootstrap.min.css'),
+            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')
+        ],
+        "pretty-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",
+            path.join(__dirname, 'public/js/reveal-markdown.js'),
+            path.join(__dirname, 'public/js/pretty.js')
+        ],
         ]
     },