Optimize hackmd resource packing and load orders

package.json

@@ -26,15 +26,20 @@
     "diff-match-patch": "git+https://github.com/hackmdio/diff-match-patch.git",
     "ejs": "^2.5.2",
     "engine.io-client": "^1.7.0",
+    "emojify.js": "~1.1.0",
     "express": ">=4.14",
     "express-session": "^1.14.1",
     "file-saver": "^1.3.3",
     "flowchart.js": "^1.6.3",
+    "font-awesome": "^4.7.0",
     "formidable": "^1.0.17",
+    "gist-embed": "~2.6.0",
     "handlebars": "^4.0.5",
     "helmet": "^2.3.0",
+    "highlight.js": "~9.7.0",
     "i18n": "^0.8.3",
     "imgur": "git+https://github.com/hackmdio/node-imgur.git",
+    "ionicons": "~2.0.1",
     "jquery": "^3.1.1",
     "jquery-mousewheel": "^3.1.13",
     "jquery-textcomplete": "^1.7.3",
@@ -62,12 +67,15 @@
     "markdown-it-sub": "^1.0.0",
     "markdown-it-sup": "^1.0.0",
     "markdown-pdf": "^7.0.0",
+    "mathjax": "~2.7.0",
+    "mermaid": "~6.0.0",
     "meta-marked": "^0.4.2",
     "method-override": "^2.3.6",
     "moment": "^2.15.1",
     "morgan": "^1.7.0",
     "mysql": "^2.11.1",
     "node-uuid": "^1.4.7",
+    "octicons": "~3.5.0",
     "passport": "^0.3.2",
     "passport-dropbox-oauth2": "^1.1.0",
     "passport-facebook": "^2.1.1",
@@ -129,6 +137,7 @@
     "babel-loader": "^6.2.5",
     "bower": "^1.7.9",
     "bower-webpack-plugin": "^0.1.9",
+    "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.25.0",
     "ejs-loader": "^0.3.0",
     "exports-loader": "^0.6.3",

public/js/extra.js

@@ -904,7 +904,7 @@ emojify.setConfig({
         elements: ['script', 'textarea', 'a', 'pre', 'code', 'svg'],
         classes: ['no-emojify']
     },
-    img_dir: serverurl + '/vendor/emojify.js/dist/images/basic',
+    img_dir: serverurl + '/build/emojify.js/dist/images/basic',
     ignore_emoticons: true
 });
 

public/views/foot.ejs

@@ -3,7 +3,9 @@
 </script>
 <% if(useCDN) { %>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js" integrity="sha256-PieqE0QdEDMppwXrTzSZQr6tWFX3W5KkyRVyF1zN3eg=" crossorigin="anonymous" 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/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>
@@ -11,26 +13,15 @@
 <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/spin.js/spin.min.js" defer></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="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/lodash.js/4.16.4/lodash.min.js" integrity="sha256-KteOoEtQ75FeAFFOTJZlvNt0iJ8NMusVDESd5jlwKEQ=" crossorigin="anonymous" defer></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.6.0/socket.io.min.js" integrity="sha256-cWq3zEr9WYp1WMLVDJzn0qrmN34bW1gPyZrhixEyPmc=" 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/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/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/index-scripts %>
-<script src="<%- url %>/js/google-drive-upload.js" defer></script>
+<% } else { %>
-<script src="<%- url %>/js/google-drive-picker.js" defer></script>
+<script src="<%- url %>/build/MathJax/MathJax.js" defer></script>
-<script src="<%- url %>/js/reveal-markdown.js" defer></script>
+<script src="<%- url %>/build/MathJax/config/TeX-AMS-MML_HTMLorMML.js" defer></script>
+<%- include build/index-pack-scripts %>
+<% } %>

public/views/head.ejs

@@ -8,36 +8,15 @@
 <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/bootstrap-social/4.9.0/bootstrap-social.min.css" integrity="sha256-02JtFTurpwBjQJ6q13iJe82/NF0RbZlJroDegK5g87Y=" 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/bootstrap-social/4.9.0/bootstrap-social.min.css" integrity="sha256-02JtFTurpwBjQJ6q13iJe82/NF0RbZlJroDegK5g87Y=" crossorigin="anonymous" />
+<link rel="stylesheet" href='<%- url %>/build/emojify.js/dist/css/basic/emojify.min.css'>
-<link rel="stylesheet" href="<%- url %>/css/google-font.css">
-<% } 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/bootstrap-social.css">
-<link rel="stylesheet" href="<%- url %>/css/font.css">
-<% } %>
-<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 %>/vendor/jquery-ui/jquery-ui.min.css">
-<link rel="stylesheet" href="<%- url %>/vendor/codemirror/lib/codemirror.css">
-<link rel="stylesheet" href="<%- url %>/vendor/codemirror-spell-checker/spell-checker.min.css">
-<link rel="stylesheet" href="<%- url %>/vendor/codemirror/addon/fold/foldgutter.css">
-<link rel="stylesheet" href="<%- url %>/vendor/codemirror/addon/display/fullscreen.css">
-<link rel="stylesheet" href="<%- url %>/vendor/codemirror/addon/dialog/dialog.css">
-<link rel="stylesheet" href="<%- url %>/vendor/codemirror/addon/scroll/simplescrollbars.css">
-<link rel="stylesheet" href="<%- url %>/vendor/codemirror/addon/search/matchesonscrollbar.css">
-<link rel="stylesheet" href="<%- url %>/vendor/codemirror/theme/monokai.css">
-<link rel="stylesheet" href="<%- url %>/vendor/codemirror/theme/one-dark.css">
-<link rel="stylesheet" href="<%- url %>/vendor/codemirror/mode/tiddlywiki/tiddlywiki.css">
-<link rel="stylesheet" href="<%- url %>/vendor/codemirror/mode/mediawiki/mediawiki.css">
-<link rel="stylesheet" href="<%- url %>/css/github-extract.css">
-<link rel="stylesheet" href="<%- url %>/vendor/emojify.js/dist/css/basic/emojify.min.css">
-<link rel="stylesheet" href="<%- url %>/vendor/showup/showup.css">
-<link rel="stylesheet" href="<%- url %>/css/mermaid.css">
-<link rel="stylesheet" href="<%- url %>/css/markdown.css">
-
 <%- include build/index-header %>
-
+<% } else { %>
+<link rel="stylesheet" href='<%- url %>/build/emojify.js/dist/css/basic/emojify.min.css'>
+<%- include build/index-pack-header %>
+<% } %>
 <%- include polyfill %>

public/views/help-modal.ejs

@@ -113,7 +113,7 @@
                                             <td>```javascript<br>var i = 0;<br>```</td>
                                         </tr>
                                         <tr>
-                                            <td><img align="absmiddle" alt=":smile:" class="emoji" src="./vendor/emojify.js/dist/images/basic/smile.png" title=":smile:"></img></td>
+                                            <td><img align="absmiddle" alt=":smile:" class="emoji" src="./build/emojify.js/dist/images/basic/smile.png" title=":smile:"></img></td>
                                             <td>:smile:</td>
                                         </tr>
                                         <tr>

webpackBaseConfig.js

@@ -2,6 +2,7 @@ var webpack = require('webpack');
 var path = require('path');
 var ExtractTextPlugin = require("extract-text-webpack-plugin");
 var HtmlWebpackPlugin = require('html-webpack-plugin');
+var CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = {
     plugins: [
@@ -24,17 +25,28 @@ module.exports = {
         }),
         new HtmlWebpackPlugin({
             template: 'public/views/includes/header.ejs',
-            chunks: ['vendor', 'index'],
+            chunks: ['font', 'index-styles', 'index'],
             filename: path.join(__dirname, 'public/views/build/index-header.ejs'),
             inject: false
         }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/header.ejs',
+            chunks: ['font-pack', 'index-styles-pack', 'index-styles', 'index'],
+            filename: path.join(__dirname, 'public/views/build/index-pack-header.ejs'),
+            inject: false
+        }),
         new HtmlWebpackPlugin({
             template: 'public/views/includes/scripts.ejs',
-            chunks: ['vendor', 'index'],
+            chunks: ['index'],
             filename: path.join(__dirname, 'public/views/build/index-scripts.ejs'),
             inject: false
         }),
         new HtmlWebpackPlugin({
+            template: 'public/views/includes/scripts.ejs',
+            chunks: ['common', 'index-pack'],
+            filename: path.join(__dirname, 'public/views/build/index-pack-scripts.ejs'),
+            inject: false
+        }),
         new HtmlWebpackPlugin({
             template: 'public/views/includes/header.ejs',
             chunks: ['font', 'cover'],
@@ -81,11 +93,34 @@ module.exports = {
             chunks: ['vendor', 'slide'],
             filename: path.join(__dirname, 'public/views/build/slide-scripts.ejs'),
             inject: false
-        })
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/scripts.ejs',
+            chunks: ['common', 'slide-pack'],
+            filename: path.join(__dirname, 'public/views/build/slide-pack-scripts.ejs'),
+            inject: false
+        }),
+        new CopyWebpackPlugin([
+            {
+                context: path.join(__dirname, 'node_modules/mathjax'),
+                from: {
+                    glob: '**/*',
+                    dot: false
+                },
+                to: 'MathJax/'
+            },
+            {
+                context: path.join(__dirname, 'node_modules/emojify.js'),
+                from: {
+                    glob: '**/*',
+                    dot: false
+                },
+                to: 'emojify.js/'
+            }
+        ])
     ],
 
     entry: {
-        index: path.join(__dirname, 'public/js/index.js'),
         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'),
@@ -97,7 +132,10 @@ module.exports = {
             "bootstrap"
         ],
             "js-url",
-            "expose?Spinner!spin.js",
+        index: [
+            "script!jquery-ui-resizable",
+            "js-url",
+            "expose?filterXSS!xss",
             "script!Idle.Js",
             "expose?LZString!lz-string",
             "script!codemirror",
@@ -107,7 +145,67 @@ module.exports = {
             "script!codemirrorInlineAttachment",
             "script!ot",
             "flowchart.js",
-            "js-sequence-diagrams"
+            "js-sequence-diagrams",
+            path.join(__dirname, 'public/js/google-drive-upload.js'),
+            path.join(__dirname, 'public/js/google-drive-picker.js'),
+            path.join(__dirname, 'public/js/reveal-markdown.js'),
+            path.join(__dirname, 'public/js/index.js')
+        ],
+        "index-styles": [
+            path.join(__dirname, 'public/vendor/jquery-ui/jquery-ui.min.css'),
+            path.join(__dirname, 'public/vendor/codemirror/lib/codemirror.css'),
+            path.join(__dirname, 'public/vendor/codemirror-spell-checker/spell-checker.min.css'),
+            path.join(__dirname, 'public/vendor/codemirror/addon/fold/foldgutter.css'),
+            path.join(__dirname, 'public/vendor/codemirror/addon/display/fullscreen.css'),
+            path.join(__dirname, 'public/vendor/codemirror/addon/dialog/dialog.css'),
+            path.join(__dirname, 'public/vendor/codemirror/addon/scroll/simplescrollbars.css'),
+            path.join(__dirname, 'public/vendor/codemirror/addon/search/matchesonscrollbar.css'),
+            path.join(__dirname, 'public/vendor/codemirror/theme/monokai.css'),
+            path.join(__dirname, 'public/vendor/codemirror/theme/one-dark.css'),
+            path.join(__dirname, 'public/vendor/codemirror/mode/tiddlywiki/tiddlywiki.css'),
+            path.join(__dirname, 'public/vendor/codemirror/mode/mediawiki/mediawiki.css'),
+            path.join(__dirname, 'public/css/github-extract.css'),
+            path.join(__dirname, 'public/vendor/showup/showup.css'),
+            path.join(__dirname, 'public/css/mermaid.css'),
+            path.join(__dirname, 'public/css/markdown.css')
+        ],
+        "index-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, 'public/css/bootstrap-social.css'),
+            path.join(__dirname, 'node_modules/ionicons/css/ionicons.min.css'),
+            path.join(__dirname, 'node_modules/octicons/octicons/octicons.css')
+        ],
+        "index-pack": [
+            "expose?Spinner!spin.js",
+            "script!jquery-ui-resizable",
+            "script!codemirror",
+            "expose?jsyaml!js-yaml",
+            "script!mermaid",
+            "expose?moment!moment",
+            "js-url",
+            "script!handlebars",
+            "expose?hljs!highlight.js",
+            "expose?emojify!emojify.js",
+            "expose?filterXSS!xss",
+            "script!Idle.Js",
+            "script!gist-embed",
+            "expose?LZString!lz-string",
+            "script!codemirror",
+            "script!inlineAttachment",
+            "script!jqueryTextcomplete",
+            "script!codemirrorSpellChecker",
+            "script!codemirrorInlineAttachment",
+            "script!ot",
+            "flowchart.js",
+            "js-sequence-diagrams",
+            "expose?Viz!viz.js",
+            "expose?io!socket.io-client",
+            path.join(__dirname, 'public/js/google-drive-upload.js'),
+            path.join(__dirname, 'public/js/google-drive-picker.js'),
+            path.join(__dirname, 'public/js/reveal-markdown.js'),
+            path.join(__dirname, 'public/js/index.js')
+        ],
         ]
     },
 
@@ -131,6 +229,10 @@ module.exports = {
             codemirrorInlineAttachment: path.join(__dirname, 'public/vendor/inlineAttachment/codemirror.inline-attachment.js'),
             ot: path.join(__dirname, 'public/vendor/ot/ot.min.js'),
             listPagnation: path.join(__dirname, 'node_modules/list.pagination.js/dist/list.pagination.min.js'),
+            mermaid: path.join(__dirname, 'node_modules/mermaid/dist/mermaid.min.js'),
+            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'),
         }
     },