Optimize index page resources packing and loads

package.json

@@ -85,6 +85,7 @@
     "request": "^2.75.0",
     "reveal.js": "^3.3.0",
     "sequelize": "^3.24.3",
+    "select2": "^3.5.2-browserify",
     "sequelize-cli": "^2.4.0",
     "shortid": "2.2.6",
     "socket.io": "~1.6.0",
@@ -97,6 +98,7 @@
     "to-markdown": "^3.0.1",
     "toobusy-js": "^0.5.1",
     "uws": "^0.11.0",
+    "velocity-animate": "^1.3.1",
     "visibilityjs": "^1.2.4",
     "viz.js": "^1.3.0",
     "winston": "^2.2.0",

public/views/index.ejs

@@ -13,25 +13,16 @@
     <title>HackMD - <%= __('Collaborative markdown notes') %></title>
     <link rel="icon" type="image/png" href="<%- url %>/favicon.png">
     <link rel="apple-touch-icon" href="<%- url %>/apple-touch-icon.png">
-
-    <!-- Bootstrap core CSS -->
     <% 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.6.2/css/font-awesome.min.css" integrity="sha256-tWdbDR7ojbN0seYOMB/anwwdNYX0cXNGiCcRX8TlKcI=" 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/select2/3.5.4/select2.min.css" integrity="sha256-ijlUKKj3hJCiiT2HWo1kqkI79NTEYpzOsw5Rs3k42dI=" crossorigin="anonymous" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2-bootstrap.min.css" integrity="sha256-NAWFcNIZdH+TS1xpWujF/EB/Y8gwBbEOCoaK/eqaer8=" crossorigin="anonymous" />
-    <link rel="stylesheet" href="<%- url %>/css/google-font.css">
-	<% } else { %>
-	<link rel="stylesheet" href="<%- url %>/vendor/bootstrap/dist/css/bootstrap.min.css">
-	<link rel="stylesheet" href="<%- url %>/vendor/font-awesome/css/font-awesome.min.css">
-	<link rel="stylesheet" href="<%- url %>/css/bootstrap-social.css">
-    <link rel="stylesheet" href="<%- url %>/vendor/select2/select2.css">
-    <link rel="stylesheet" href="<%- url %>/vendor/select2/select2-bootstrap.css">
-    <link rel="stylesheet" href="<%- url %>/css/font.css">
-    <% } %>
-    <!-- Custom styles for this template -->
     <%- include build/cover-header %>
+	<% } else { %>
+	<%- include build/cover-pack-header %>
+    <% } %>
     <%- include polyfill %>
 </head>
 
@@ -196,27 +187,18 @@
     </div>
     <%- include signin-modal %>
 
-    <!-- Bootstrap core JavaScript
-    ================================================== -->
-    <!-- Placed at the end of the document so the pages load faster -->
     <% 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/list.pagination.js/0.1.1/list.pagination.min.js" integrity="sha256-WwTza96H3BgcQTfEfxX7MFaFc/dZA0QrPRKDRLdFHJo=" crossorigin="anonymous" defer></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js" integrity="sha256-HzzZFiY4t0PIv02Tm8/R3CVvLpcjHhO1z/YAUCp4oQ4=" 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/js-url/2.3.0/url.min.js" integrity="sha256-HOZJz4x+1mn1Si84WT5XKXPtOlTytmZLnMb6n1v4+5Q=" crossorigin="anonymous" defer></script>
-	<% } else { %>
-    <script src="<%- url %>/vendor/velocity/velocity.min.js" defer></script>
-    <script src="<%- url %>/vendor/select2/select2.min.js" defer></script>
-	<script src="<%- url %>/vendor/moment/min/moment-with-locales.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/list.pagination.js/0.1.1/list.pagination.min.js" integrity="sha256-WwTza96H3BgcQTfEfxX7MFaFc/dZA0QrPRKDRLdFHJo=" 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>
     <%- include build/cover-scripts %>
+	<% } else { %>
+    <%- include build/cover-pack-scripts %>
+	<% } %>
 </body>
 
 </html>

webpackBaseConfig.js

@@ -34,19 +34,31 @@ module.exports = {
             filename: path.join(__dirname, 'public/views/build/index-scripts.ejs'),
             inject: false
         }),
+        new HtmlWebpackPlugin({
         new HtmlWebpackPlugin({
             template: 'public/views/includes/header.ejs',
-            chunks: ['vendor', 'cover'],
+            chunks: ['font', 'cover'],
             filename: path.join(__dirname, 'public/views/build/cover-header.ejs'),
             inject: false
         }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/header.ejs',
+            chunks: ['font-pack', 'cover-styles-pack', 'cover'],
+            filename: path.join(__dirname, 'public/views/build/cover-pack-header.ejs'),
+            inject: false
+        }),
         new HtmlWebpackPlugin({
             template: 'public/views/includes/scripts.ejs',
-            chunks: ['vendor', 'cover'],
+            chunks: ['cover'],
             filename: path.join(__dirname, 'public/views/build/cover-scripts.ejs'),
             inject: false
         }),
         new HtmlWebpackPlugin({
+            template: 'public/views/includes/scripts.ejs',
+            chunks: ['common', 'cover-pack'],
+            filename: path.join(__dirname, 'public/views/build/cover-pack-scripts.ejs'),
+            inject: false
+        }),
             template: 'public/views/includes/header.ejs',
             chunks: ['vendor', 'pretty'],
             filename: path.join(__dirname, 'public/views/build/pretty-header.ejs'),
@@ -73,13 +85,17 @@ module.exports = {
     ],
 
     entry: {
-        cover: path.join(__dirname, 'public/js/cover.js'),
         index: path.join(__dirname, 'public/js/index.js'),
         pretty: path.join(__dirname, 'public/js/pretty.js'),
         slide: path.join(__dirname, 'public/js/slide.js'),
-        vendor: [
+        font: path.join(__dirname, 'public/css/google-font.css'),
+        "font-pack": path.join(__dirname, 'public/css/font.css'),
+        common: [
+            "expose?jQuery!expose?$!jquery",
+            "velocity-animate",
             "imports?$=jquery!jquery-mousewheel",
-            "expose?filterXSS!xss",
+            "bootstrap"
+        ],
             "js-url",
             "expose?Spinner!spin.js",
             "script!Idle.Js",
@@ -113,7 +129,8 @@ module.exports = {
             jqueryTextcomplete: path.join(__dirname, 'public/vendor/jquery-textcomplete/jquery.textcomplete.js'),
             codemirrorSpellChecker: path.join(__dirname, 'public/vendor/codemirror-spell-checker/spell-checker.min.js'),
             codemirrorInlineAttachment: path.join(__dirname, 'public/vendor/inlineAttachment/codemirror.inline-attachment.js'),
-            ot: path.join(__dirname, 'public/vendor/ot/ot.min.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'),
         }
     },
 
@@ -124,7 +141,8 @@ module.exports = {
         "jquery": "$",
         "moment": "moment",
         "handlebars": "Handlebars",
-        "highlight.js": "hljs"
+        "highlight.js": "hljs",
+        "select2": "select2"
     },
 
     module: {