From 5287d46931f3272987b21c2d6a16e914f48029d3 Mon Sep 17 00:00:00 2001 From: Wu Cheng-Han Date: Sat, 26 Nov 2016 23:18:51 +0800 Subject: [PATCH] Optimize hackmd resource packing and load orders --- package.json | 9 +++ public/js/extra.js | 2 +- public/views/foot.ejs | 25 +++----- public/views/head.ejs | 37 +++--------- public/views/help-modal.ejs | 2 +- webpackBaseConfig.js | 114 ++++++++++++++++++++++++++++++++++-- 6 files changed, 135 insertions(+), 54 deletions(-) diff --git a/package.json b/package.json index bf052a7..bdbfe74 100644 --- a/package.json +++ b/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", diff --git a/public/js/extra.js b/public/js/extra.js index dd02c9c..20ce172 100644 --- a/public/js/extra.js +++ b/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 }); diff --git a/public/views/foot.ejs b/public/views/foot.ejs index 3cfec76..4a54ac4 100644 --- a/public/views/foot.ejs +++ b/public/views/foot.ejs @@ -3,7 +3,9 @@ <% if(useCDN) { %> + + @@ -11,26 +13,15 @@ -<% } else { %> - - - - - - - - -<% } %> - - - - + <%- include build/index-scripts %> - - - +<% } else { %> + + +<%- include build/index-pack-scripts %> +<% } %> diff --git a/public/views/head.ejs b/public/views/head.ejs index fb51b14..218847f 100644 --- a/public/views/head.ejs +++ b/public/views/head.ejs @@ -8,36 +8,15 @@ <% if(useCDN) { %> + + + - - -<% } else { %> - - - - -<% } %> - - - - - - - - - - - - - - - - - - - - + <%- include build/index-header %> - +<% } else { %> + +<%- include build/index-pack-header %> +<% } %> <%- include polyfill %> \ No newline at end of file diff --git a/public/views/help-modal.ejs b/public/views/help-modal.ejs index 08fee9c..b1ea681 100644 --- a/public/views/help-modal.ejs +++ b/public/views/help-modal.ejs @@ -113,7 +113,7 @@ ```javascript
var i = 0;
``` - :smile: + :smile: :smile: diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js index 38a630f..459be73 100644 --- a/webpackBaseConfig.js +++ b/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'), } },