From a1da4c89ff2f2568f0bbebc1208c07829c09f38b Mon Sep 17 00:00:00 2001 From: Jon Paul Miles Date: Fri, 1 Nov 2019 06:27:47 -0500 Subject: [PATCH] Removes html details from files array and moves them into separate json files for more memory efficient loading. --- package.json | 1 + the-magic/boot/router.js | 3 - the-magic/boot/store-reconciliation.js | 12 +++- the-magic/build/build.js | 83 +++++++++++++++++--------- the-magic/build/folders.js | 1 + the-magic/build/render-markdown.js | 2 +- yarn.lock | 9 ++- 7 files changed, 74 insertions(+), 37 deletions(-) diff --git a/package.json b/package.json index 1cd3466..bcf18f1 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "express": "^4.17.1", "gray-matter": "^4.0.2", "lodash.camelcase": "^4.3.0", + "lodash.omit": "^4.5.0", "lodash.throttle": "^4.1.1", "node-fetch": "^2.6.0", "route-cache": "^0.4.4", diff --git a/the-magic/boot/router.js b/the-magic/boot/router.js index ed8fe29..368306b 100644 --- a/the-magic/boot/router.js +++ b/the-magic/boot/router.js @@ -6,9 +6,6 @@ import camelCase from "lodash.camelcase"; /** * `the-magic/build/gulpfile.js` will automatically inject `.vue` files located in the specified `components` and `partials` folder paths (See `/site.config.js`) into this `components` constant between the comments: - * // globalize vue components - * and - * // end globalize vue components * This makes our components available globally under the camelCase version of the file-name (without the extension) */ const components = { diff --git a/the-magic/boot/store-reconciliation.js b/the-magic/boot/store-reconciliation.js index fb4b647..1171bb9 100644 --- a/the-magic/boot/store-reconciliation.js +++ b/the-magic/boot/store-reconciliation.js @@ -5,6 +5,7 @@ import router from "./router"; import config from "config"; import './facebook-social'; Vue.use(VueStash); +const isProd = process.env.NODE_ENV === "production"; const defaultStore = config.store; let store = defaultStore; @@ -23,9 +24,16 @@ try { /** * Before loading the URL, finding the markdown file matching that URL and set the markdown's rendered HTML and metadata object as the `file` property of the store. If a markdown file cannot be found, then load a 404 page */ -router.beforeEach((to, from, next) => { +router.beforeEach(async (to, from, next) => { let path = to.path.replace('.html', '').replace('.htm', ''); - const found = store.files.find(post => post.url === path); + + let found + if(isProd) { + found = store.file.url === path ? store.file : await fetch(`/json/${path}.json`) + .then(res => res.json()); + } else { + found = store.files.find(post => post.url === path); + } /** * Setting `postBodyEl` will enable scroll tracking with Google Analytics on a page. diff --git a/the-magic/build/build.js b/the-magic/build/build.js index 8bda2eb..a7d70ca 100644 --- a/the-magic/build/build.js +++ b/the-magic/build/build.js @@ -7,6 +7,7 @@ const isProd = process.env.NODE_ENV === "production"; const path = require("path"); const url = require("url"); const fs = require("fs"); +const omit = require('lodash.omit') const { createBundleRenderer } = require("vue-server-renderer"); const mkdirp = require("mkdirp"); const config = require("../../site.config"); @@ -47,6 +48,27 @@ function createFile(url, html) { }); } +function createMarkdownJSON(url, html) { + return new Promise((resolve, reject) => { + url += !path.extname(url) ? ".json" : ""; + + url = path.join(folders.markdown_json_folder, url); + + mkdirp(path.dirname(url), function(err) { + if (err) return cb(err); + fs.writeFile(url, JSON.stringify(html, null, 2), err => { + if (err) { + reject(err) + return console.log(err); + } + console.log(`${url.replace(__dirname, "")} was created.`); + resolve() + }); + }); + }) + +} + const serverBundlePath = path.join( folders.output_folder, "vue-ssr-server-bundle.json" @@ -83,37 +105,40 @@ renderMarkdownFolder().then(files => { const context = { file, - files + files: files.map(f => omit(f, ['html', 'path', 'isEmpty'])) }; - renderer.renderToString(context, (err, html) => { - if (err) { - console.warn(`Error with SSR`, err); - } - - const { - title, - htmlAttrs, - bodyAttrs, - link, - style, - script, - noscript, - meta - } = context.meta.inject(); - - html = html.replace( - "", - meta.text() + - title.text() + - link.text() + - style.text() + - script.text() + - noscript.text() - ); - - createFile(file.url === "/" ? "/index" : file.url, html); - }); + createMarkdownJSON(file.url, file) + .then(() => { + renderer.renderToString(context, (err, html) => { + if (err) { + console.warn(`Error with SSR`, err); + } + + const { + title, + htmlAttrs, + bodyAttrs, + link, + style, + script, + noscript, + meta + } = context.meta.inject(); + + html = html.replace( + "", + meta.text() + + title.text() + + link.text() + + style.text() + + script.text() + + noscript.text() + ); + + createFile(file.url === "/" ? "/index" : file.url, html); + }); + }) }); let filtered_files = files diff --git a/the-magic/build/folders.js b/the-magic/build/folders.js index cdeef4f..f10c77d 100644 --- a/the-magic/build/folders.js +++ b/the-magic/build/folders.js @@ -23,6 +23,7 @@ const folders = { images_folder: path.resolve(root, config.folderStructure.images), html_template: path.resolve(root, config.folderStructure.html), output_folder: path.resolve(root, config.folderStructure.output), + markdown_json_folder: path.join(root, 'dist', 'json'), }; module.exports = folders \ No newline at end of file diff --git a/the-magic/build/render-markdown.js b/the-magic/build/render-markdown.js index 243589f..2a94c98 100644 --- a/the-magic/build/render-markdown.js +++ b/the-magic/build/render-markdown.js @@ -195,6 +195,6 @@ exports.renderMarkdownFile = function renderMarkdownFile(file_path, files = []) return new Date(b.created) - new Date(a.created); }); - resolve([ files, fileInfo]); + resolve([ files, fileInfo ]); }); } diff --git a/yarn.lock b/yarn.lock index 0f3bcda..1166b0a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3632,7 +3632,7 @@ lodash._root@^3.0.0: resolved "https://registry.yarnpkg.com/lodash._root/-/lodash._root-3.0.1.tgz#fba1c4524c19ee9a5f8136b4609f017cf4ded692" integrity sha1-+6HEUkwZ7ppfgTa0YJ8BfPTe1pI= -lodash.camelcase@^4.5.0: +lodash.camelcase@^4.3.0: version "4.3.0" resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6" integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY= @@ -3673,6 +3673,11 @@ lodash.keys@^3.0.0: lodash.isarguments "^3.0.0" lodash.isarray "^3.0.0" +lodash.omit@^4.5.0: + version "4.5.0" + resolved "https://registry.yarnpkg.com/lodash.omit/-/lodash.omit-4.5.0.tgz#6eb19ae5a1ee1dd9df0b969e66ce0b7fa30b5e60" + integrity sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA= + lodash.restparam@^3.0.0: version "3.6.1" resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805" @@ -3716,7 +3721,7 @@ lodash.templatesettings@^4.0.0: dependencies: lodash._reinterpolate "^3.0.0" -lodash.throttle@^4.5.0: +lodash.throttle@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4" integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=