Optimize index page resources packing and loads

This commit is contained in:
Wu Cheng-Han 2016-11-26 23:13:02 +08:00
parent 71a356552f
commit 3fbfdb7db8
3 changed files with 37 additions and 35 deletions

View file

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

View file

@ -13,25 +13,16 @@
<title>HackMD - <%= __('Collaborative markdown notes') %></title> <title>HackMD - <%= __('Collaborative markdown notes') %></title>
<link rel="icon" type="image/png" href="<%- url %>/favicon.png"> <link rel="icon" type="image/png" href="<%- url %>/favicon.png">
<link rel="apple-touch-icon" href="<%- url %>/apple-touch-icon.png"> <link rel="apple-touch-icon" href="<%- url %>/apple-touch-icon.png">
<!-- Bootstrap core CSS -->
<% if(useCDN) { %> <% 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/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/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.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="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 %> <%- include build/cover-header %>
<% } else { %>
<%- include build/cover-pack-header %>
<% } %>
<%- include polyfill %> <%- include polyfill %>
</head> </head>
@ -196,27 +187,18 @@
</div> </div>
<%- include signin-modal %> <%- include signin-modal %>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<% if(useCDN) { %> <% 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/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/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/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> <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 %> <%- include build/cover-scripts %>
<% } else { %>
<%- include build/cover-pack-scripts %>
<% } %>
</body> </body>
</html> </html>

View file

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