Lazy load some of the largest dependencies: chrono, spellchecker, sanitize-html, emoji-data

packages/client-app/src/date-utils.es6

@@ -1,5 +1,4 @@
 import moment from 'moment-timezone'
-import chrono from 'chrono-node'
 import _ from 'underscore'
 
 // Init locale for moment
@@ -49,33 +48,51 @@ function isPastDate(inputDateObj, currentDate) {
   return inputMoment.isBefore(currentMoment)
 }
 
-const EnforceFutureDate = new chrono.Refiner();
-EnforceFutureDate.refine = (text, results) => {
-  results.forEach((result) => {
-    const current = _.extend({}, result.start.knownValues, result.start.impliedValues);
+let _chronoFuture = null;
+let _chrono = null;
 
-    if (result.start.isCertain('weekday') && !result.start.isCertain('day')) {
-      if (isPastDate(current, result.ref)) {
-        result.start.imply('day', result.start.impliedValues.day + 7);
-      }
-    }
+function getChrono() {
+  if (!_chrono) {
+    _chrono = require('chrono-node').default; //eslint-disable-line
+  }
+  return _chrono;
+}
 
-    if (result.start.isCertain('day') && !result.start.isCertain('month')) {
-      if (isPastDate(current, result.ref)) {
-        result.start.imply('month', result.start.impliedValues.month + 1);
-      }
-    }
-    if (result.start.isCertain('month') && !result.start.isCertain('year')) {
-      if (isPastDate(current, result.ref)) {
-        result.start.imply('year', result.start.impliedValues.year + 1);
-      }
-    }
-  });
-  return results;
-};
+function getChronoFuture() {
+  if (_chronoFuture) {
+    return _chronoFuture;
+  }
 
-const chronoFuture = new chrono.Chrono(chrono.options.casualOption());
-chronoFuture.refiners.push(EnforceFutureDate);
+  const chrono = getChrono();
+  const EnforceFutureDate = new chrono.Refiner();
+  EnforceFutureDate.refine = (text, results) => {
+    results.forEach((result) => {
+      const current = _.extend({}, result.start.knownValues, result.start.impliedValues);
+
+      if (result.start.isCertain('weekday') && !result.start.isCertain('day')) {
+        if (isPastDate(current, result.ref)) {
+          result.start.imply('day', result.start.impliedValues.day + 7);
+        }
+      }
+
+      if (result.start.isCertain('day') && !result.start.isCertain('month')) {
+        if (isPastDate(current, result.ref)) {
+          result.start.imply('month', result.start.impliedValues.month + 1);
+        }
+      }
+      if (result.start.isCertain('month') && !result.start.isCertain('year')) {
+        if (isPastDate(current, result.ref)) {
+          result.start.imply('year', result.start.impliedValues.year + 1);
+        }
+      }
+    });
+    return results;
+  };
+
+  _chronoFuture = new chrono.Chrono(chrono.options.casualOption());
+  _chronoFuture.refiners.push(EnforceFutureDate);
+  return _chronoFuture;
+}
 
 
 const DateUtils = {
@@ -160,7 +177,7 @@ const DateUtils = {
   },
 
   parseDateString(dateLikeString) {
-    const parsed = chrono.parse(dateLikeString)
+    const parsed = getChrono().parse(dateLikeString)
     const gotTime = {start: false, end: false};
     const gotDay = {start: false, end: false};
     const now = moment();
@@ -218,7 +235,7 @@ const DateUtils = {
    * @return {moment} - moment object representing date
    */
   futureDateFromString(dateLikeString) {
-    const date = chronoFuture.parseDate(dateLikeString)
+    const date = getChronoFuture().parseDate(dateLikeString)
     if (!date) {
       return null
     }

packages/client-app/src/flux/models/event.es6

@@ -1,10 +1,11 @@
-import chrono from 'chrono-node';
 import moment from 'moment';
 
 import Model from './model';
 import Attributes from '../attributes';
 import Contact from './contact';
 
+// the Chrono node module is huge
+let chrono = null;
 
 export default class Event extends Model {
 
@@ -197,6 +198,9 @@ export default class Event extends Model {
   displayTitle() {
     const displayTitle = this.title.replace(/.*Invitation: /, "")
     const [displayTitleWithoutDate, date] = displayTitle.split(" @ ")
+    if (!chrono) {
+      chrono = require('chrono-node').default; //eslint-disable-line
+    }
     if (date && chrono.parseDate(date)) {
       return displayTitleWithoutDate
     }

packages/client-app/src/regexp-utils.coffee

@@ -1,5 +1,6 @@
 _ = require('underscore')
-EmojiData = require('emoji-data')
+
+EmojiData = null;
 
 UnicodeEmailChars = '\u0080-\u00FF\u0100-\u017F\u0180-\u024F\u0250-\u02AF\u0300-\u036F\u0370-\u03FF\u0400-\u04FF\u0500-\u052F\u0530-\u058F\u0590-\u05FF\u0600-\u06FF\u0700-\u074F\u0750-\u077F\u0780-\u07BF\u07C0-\u07FF\u0900-\u097F\u0980-\u09FF\u0A00-\u0A7F\u0A80-\u0AFF\u0B00-\u0B7F\u0B80-\u0BFF\u0C00-\u0C7F\u0C80-\u0CFF\u0D00-\u0D7F\u0D80-\u0DFF\u0E00-\u0E7F\u0E80-\u0EFF\u0F00-\u0FFF\u1000-\u109F\u10A0-\u10FF\u1100-\u11FF\u1200-\u137F\u1380-\u139F\u13A0-\u13FF\u1400-\u167F\u1680-\u169F\u16A0-\u16FF\u1700-\u171F\u1720-\u173F\u1740-\u175F\u1760-\u177F\u1780-\u17FF\u1800-\u18AF\u1900-\u194F\u1950-\u197F\u1980-\u19DF\u19E0-\u19FF\u1A00-\u1A1F\u1B00-\u1B7F\u1D00-\u1D7F\u1D80-\u1DBF\u1DC0-\u1DFF\u1E00-\u1EFF\u1F00-\u1FFF\u20D0-\u20FF\u2100-\u214F\u2C00-\u2C5F\u2C60-\u2C7F\u2C80-\u2CFF\u2D00-\u2D2F\u2D30-\u2D7F\u2D80-\u2DDF\u2F00-\u2FDF\u2FF0-\u2FFF\u3040-\u309F\u30A0-\u30FF\u3100-\u312F\u3130-\u318F\u3190-\u319F\u31C0-\u31EF\u31F0-\u31FF\u3200-\u32FF\u3300-\u33FF\u3400-\u4DBF\u4DC0-\u4DFF\u4E00-\u9FFF\uA000-\uA48F\uA490-\uA4CF\uA700-\uA71F\uA800-\uA82F\uA840-\uA87F\uAC00-\uD7AF\uF900-\uFAFF'
 
@@ -166,9 +167,9 @@ RegExpUtils =
   # SO discussion: http://stackoverflow.com/questions/10687099/how-to-test-if-a-url-string-is-absolute-or-relative/31991870#31991870
   hasValidSchemeRegex: -> new RegExp('^[a-z][a-z0-9+.-]*:', 'i')
 
-  emojiRegex: -> FBS_REGEXP = new RegExp(
-    "(?:#{EmojiData.chars({include_variants: true}).join("|")})",
-    "g")
+  emojiRegex: ->
+    EmojiData = require('emoji-data') unless EmojiData
+    new RegExp("(?:#{EmojiData.chars({include_variants: true}).join("|")})", "g")
 
   looseStyleTag: -> /<style/gim
 

packages/client-app/src/services/sanitize-transformer.es6

@@ -1,4 +1,4 @@
-import sanitizeHtml from 'sanitize-html';
+let sanitizeHtml = null;
 
 const Preset = {
   Strict: {
@@ -51,6 +51,9 @@ class SanitizeTransformer {
       settings.allowedAttributes = attrMap;
     }
 
+    if (!sanitizeHtml) {
+      sanitizeHtml = require('sanitize-html').default; //eslint-disable-line
+    }
     return Promise.resolve(sanitizeHtml(body, settings));
   }
 }

packages/client-app/src/spellchecker.es6

@@ -1,5 +1,4 @@
 import {remote} from 'electron';
-import {SpellCheckHandler} from 'electron-spellchecker';
 import fs from 'fs';
 import path from 'path';
 
@@ -8,9 +7,6 @@ const customDictFilePath = path.join(NylasEnv.getConfigDirPath(), 'custom-dict.j
 
 class Spellchecker {
   constructor() {
-    this.handler = new SpellCheckHandler();
-    this.handler.switchLanguage('en-US'); // Start with US English
-    this.handler.attachToInput();
     this.isMisspelledCache = {};
 
     this._customDictLoaded = false;
@@ -19,7 +15,16 @@ class Spellchecker {
     this._saveAgain = false;
 
     this._customDict = {};
-    this._loadCustomDict();
+
+    // Nobody will notice if spellcheck isn't avaialable for a few seconds and it
+    // takes a considerable amount of time to startup (212ms in dev mode on my 2017 MBP)
+    setTimeout(() => {
+      const {SpellCheckHandler} = require('electron-spellchecker'); //eslint-disable-line
+      this.handler = new SpellCheckHandler();
+      this.handler.switchLanguage('en-US'); // Start with US English
+      this.handler.attachToInput();
+      this._loadCustomDict();
+    }, 5000);
   }
 
   _loadCustomDict = () => {
@@ -71,6 +76,9 @@ class Spellchecker {
   }
 
   isMisspelled = (word) => {
+    if (!this.handler) {
+      return false;
+    }
     if ({}.hasOwnProperty.call(this._customDict, word)) {
       return false
     }