Performance improvements

lib/lego.js

@@ -40,6 +40,8 @@ module.exports = async function(args) {
       await runTask(server, site);
       watch(site, runTask);
     } else {
+      process.env.NODE_ENV = 'production';
+
       const site = new Site();
       await runTask([...build, ['revisionAssets', 'optimiseImages']], site);
 

lib/site.js

@@ -21,6 +21,7 @@ class Site {
     this.logger = new Signale({ interactive: true });
     if (process.env.DEBUG) {
       let consoleLog = console.log;
+      // let consoleLog = function() {};
       this.logger = {
         success: consoleLog,
         await: consoleLog,

lib/tasks/copyMajorStaticAssets.js

@@ -2,10 +2,20 @@ module.exports = async function(site, options) {
   const fs = require('fs-extra');
   const path = require('path');
   const glob = require('glob');
-  const postcss = require('postcss');
-  const autoprefixer = require('autoprefixer');
-  const cssnano = require('cssnano');
-  const uglifyJS = require('uglify-es');
+
+  let postcss;
+  let autoprefixer;
+  let cssnano;
+  let uglifyJS;
+  const isDevelopment = site.isDevelopment();
+
+  // just requiring these adds about 2-3 seconds to startup
+  if (!isDevelopment) {
+    postcss = require('postcss');
+    autoprefixer = require('autoprefixer');
+    cssnano = require('cssnano');
+    uglifyJS = require('uglify-es');
+  }
 
   const filterFileList = require('../utils/filterFileList');
   const { STATIC, BUILD } = require('../utils/constants');
@@ -14,6 +24,9 @@ module.exports = async function(site, options) {
     let assets = glob.sync(`${STATIC}/+(js|css)/**/*`);
     assets = filterFileList(assets, ['js', 'css']);
 
+    let cssPromises = [];
+    let cssDestinations = [];
+
     for (const asset of assets) {
       let destination = path.join(BUILD, asset);
       let destinationDir = `${BUILD}/${path.dirname(asset)}`;
@@ -26,16 +39,27 @@ module.exports = async function(site, options) {
       let extension = path.extname(asset);
 
       if (extension === '.js') {
-        let result = uglifyJS.minify(contents);
-        fs.writeFileSync(destination, result.code);
+        let result = isDevelopment ? contents : uglifyJS.minify(contents).code;
+        fs.writeFileSync(destination, result);
       } else if (extension === '.css') {
-        let result = await postcss([cssnano, autoprefixer])
-          .process(contents, { from: asset, to: destination });
+        let result = isDevelopment
+          ? contents
+          : postcss([cssnano, autoprefixer]).process(contents, { from: asset, to: destination });
 
-        fs.writeFileSync(destination, result.css);
+        cssPromises.push(result);
+        cssDestinations.push(destination);
       }
     }
 
+    let cssResults = isDevelopment ? cssPromises : await Promise.all(cssPromises);
+    for (let index in cssResults) {
+      let cssResult = cssResults[index];
+      let destination = cssDestinations[index];
+
+      let result = isDevelopment ? cssResult : cssResult.css;
+      fs.writeFileSync(destination, result);
+    }
+
     site.logger.success('Copying static assets');
   } catch (error) {
     throw error;

lib/tasks/copyMinorStaticAssets.js

@@ -11,6 +11,7 @@ module.exports = async function(site) {
     let staticFiles = cleanFileList(fs.readdirSync(STATIC));
     let minorStaticFiles = staticFiles.filter((path) => !['css', 'js'].includes(path));
 
+    // Need to investigate why sync is faster than async equivalent here
     for (const asset of minorStaticFiles) {
       fs.copySync(
         `${STATIC}/${asset}`,

lib/tasks/generatePages.js

@@ -3,6 +3,7 @@ module.exports = async function(site) {
   const path = require('path');
 
   const generateHtmlFromLiquid = require('../utils/generateHtmlFromLiquid');
+  const minifyHtml = require('../utils/minifyHtml');
   const filterFileList = require('../utils/filterFileList');
   const { PAGES, BUILD } = require('../utils/constants');
 
@@ -18,13 +19,22 @@ module.exports = async function(site) {
     let filteredPages = filterFileList(pages, 'html')
       .filter(page => page !== '404.html');
 
+    let htmlPromises = [];
+    let htmlPaths = [];
     for (const page of filteredPages) {
       let pageContents = fs.readFileSync(`${PAGES}/${page}`).toString();
       let htmlPath = `${BUILD}/${path.parse(page).name}`;
       fs.mkdirp(htmlPath);
 
-      let renderedHtml = await generateHtmlFromLiquid(pageContents, { posts, data, isDevelopment });
-      fs.writeFileSync(`${htmlPath}/index.html`, renderedHtml);
+      htmlPromises.push(generateHtmlFromLiquid(pageContents, { posts, data, isDevelopment }));
+      htmlPaths.push(`${htmlPath}/index.html`);
+    }
+
+    let renderedHtmlContents = await Promise.all(htmlPromises);
+
+    for (const index in renderedHtmlContents) {
+      let renderedHtmlContent = renderedHtmlContents[index];
+      fs.writeFileSync(htmlPaths[index], minifyHtml(renderedHtmlContent, site.isDevelopment()));
     }
 
     // copy index/index.html to index.html also
@@ -33,7 +43,7 @@ module.exports = async function(site) {
     // generate 404 page
     let pageContents = fs.readFileSync(`${PAGES}/404.html`).toString();
     let renderedHtml = await generateHtmlFromLiquid(pageContents, { posts, data, isDevelopment });
-    fs.writeFileSync(`${BUILD}/404.html`, renderedHtml);
+    fs.writeFileSync(`${BUILD}/404.html`, minifyHtml(renderedHtml, site.isDevelopment()));
 
     site.logger.success(message);
   } catch (error) {

lib/tasks/generatePagesForTags.js

@@ -2,6 +2,7 @@ module.exports = async function(site) {
   const fs = require('fs-extra');
 
   const generateHtmlFromLiquid = require('../utils/generateHtmlFromLiquid');
+  const minifyHtml = require('../utils/minifyHtml');
   const { BUILD, LAYOUTS } = require('../utils/constants');
 
   try {
@@ -14,15 +15,25 @@ module.exports = async function(site) {
     let data = site.getData();
     let isDevelopment = site.isDevelopment();
 
+    let htmlGenPromises = [];
+    let htmlPaths = [];
     for (const tag of tags) {
       let htmlPath = `${BUILD}/tag/${tag.toLowerCase()}`;
       fs.mkdirp(htmlPath);
 
-      let renderedHtml = await generateHtmlFromLiquid(baseTemplate, { posts, tag, data, isDevelopment });
-      fs.writeFileSync(`${htmlPath}/index.html`, renderedHtml);
+      let renderedHtml = generateHtmlFromLiquid(baseTemplate, { posts, tag, data, isDevelopment });
+      htmlGenPromises.push(renderedHtml);
+      htmlPaths.push(`${htmlPath}/index.html`);
+    }
+
+    let renderedHtmlContents = await Promise.all(htmlGenPromises);
 
-      site.logger.success(message);
+    for (const index in renderedHtmlContents) {
+      const html = renderedHtmlContents[index];
+      fs.writeFileSync(htmlPaths[index], minifyHtml(html, site.isDevelopment()));
     }
+
+    site.logger.success(message);
   } catch (error) {
     throw error;
   }

lib/tasks/generatePostsFromMarkdown.js

@@ -2,6 +2,8 @@ module.exports = async function(site) {
   const fs = require('fs-extra');
 
   const generateHtmlFromLiquid = require('../utils/generateHtmlFromLiquid');
+  const minifyHtml = require('../utils/minifyHtml');
+
   const { BUILD, LAYOUTS } = require('../utils/constants');
 
   try {
@@ -13,6 +15,8 @@ module.exports = async function(site) {
     let data = site.getData();
     let isDevelopment = site.isDevelopment();
 
+    let htmlPromises = [];
+    let htmlPaths = [];
     for (const post of posts) {
       let htmlPath = `${BUILD}/${post.path}`;
       fs.mkdirp(htmlPath);
@@ -21,8 +25,15 @@ module.exports = async function(site) {
         ? fs.readFileSync(`${LAYOUTS}/${post.layout}`).toString()
         : baseTemplate;
 
-      let renderedHtml = await generateHtmlFromLiquid(template, { post, data, isDevelopment });
-      fs.writeFileSync(`${htmlPath}/index.html`, renderedHtml);
+      htmlPromises.push(generateHtmlFromLiquid(template, { post, data, isDevelopment }));
+      htmlPaths.push(`${htmlPath}/index.html`);
+    }
+
+    let renderedHtmlContents = await Promise.all(htmlPromises);
+
+    for (const index in renderedHtmlContents) {
+      let renderedHtmlContent = renderedHtmlContents[index];
+      fs.writeFileSync(htmlPaths[index], minifyHtml(renderedHtmlContent, site.isDevelopment()));
     }
 
     site.logger.success(message);

lib/utils/generateHtmlFromLiquid.js

@@ -1,7 +1,6 @@
 const Liquid = require('liquid-node');
 const engine = new Liquid.Engine();
 
-const minifyHtml = require('./minifyHtml');
 const { LAYOUTS } = require('./constants');
 
 // needed for `include` statements
@@ -22,7 +21,6 @@ engine.registerFilters({
   }
 });
 
-module.exports = async function(contents, options = {}) {
-  let html = await engine.parseAndRender(contents, options);
-  return minifyHtml(html);
+module.exports = function(contents, options = {}) {
+  return engine.parseAndRender(contents, options);
 }

lib/utils/minifyHtml.js

@@ -1,7 +1,11 @@
 const { minify } = require('html-minifier');
 
-module.exports = function(html) {
+module.exports = function(html, isDevelopment) {
   try {
+    if (isDevelopment) {
+      return html;
+    }
+
     return minify(html, {
       collapseWhitespace: true,
       minifyJS: false,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astronomersiva/lego",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "A custom built static site generator that will one day power [sivasubramanyam.me](https://sivasubramanyam.me) 🏋️‍",
   "main": "index.js",
   "scripts": {