perf: Reduce initial bundle size / async bundle loading (#1456)

* feat: Move to React.lazy

* perf: Remove duplicate babel/runtime

* fix: Run yarn-deduplicate

* Further attempts to remove rich-markdown-editor from initial chunk

* perf: Lazy loading of authenticated routes

* perf: Move color picker to async loading
fix: Display placeholder when loading rich editor

* fix: Cache bust on auto reload

app/scenes/Document/components/DataLoader.js

@@ -128,7 +128,7 @@ class DataLoader extends React.Component<Props> {
       // If we're attempting to update an archived, deleted, or otherwise
       // uneditable document then forward to the canonical read url.
       if (!can.update && this.isEditing) {
-        this.props.history.push(this.document.url);
+        this.props.history.push(document.url);
         return;
       }
 

app/scenes/Document/components/Document.js

@@ -24,9 +24,9 @@ import Time from "components/Time";
 import Container from "./Container";
 import Contents from "./Contents";
 import DocumentMove from "./DocumentMove";
+import Editor from "./Editor";
 import Header from "./Header";
 import KeyboardShortcutsButton from "./KeyboardShortcutsButton";
-import Loading from "./Loading";
 import MarkAsViewed from "./MarkAsViewed";
 import References from "./References";
 import { type LocationWithState } from "types";
@@ -39,7 +39,6 @@ import {
   documentUrl,
 } from "utils/routeHelpers";
 
-let EditorImport;
 const AUTOSAVE_DELAY = 3000;
 const IS_DIRTY_DELAY = 500;
 const DISCARD_CHANGES = `
@@ -69,7 +68,6 @@ type Props = {
 @observer
 class DocumentScene extends React.Component<Props> {
   @observable editor: ?any;
-  @observable editorComponent = EditorImport;
   @observable isUploading: boolean = false;
   @observable isSaving: boolean = false;
   @observable isPublishing: boolean = false;
@@ -84,7 +82,6 @@ class DocumentScene extends React.Component<Props> {
     super();
     this.title = props.document.title;
     this.lastRevision = props.document.revision;
-    this.loadEditor();
   }
 
   componentDidMount() {
@@ -197,25 +194,6 @@ class DocumentScene extends React.Component<Props> {
     }
   }
 
-  loadEditor = async () => {
-    if (this.editorComponent) return;
-
-    try {
-      const EditorImport = await import("./Editor");
-      this.editorComponent = EditorImport.default;
-    } catch (err) {
-      if (err.message && err.message.match(/chunk/)) {
-        // If the editor bundle fails to load then reload the entire window. This
-        // can happen if a deploy happens between the user loading the initial JS
-        // bundle and the async-loaded editor JS bundle as the hash will change.
-        window.location.reload();
-        return;
-      }
-
-      throw err;
-    }
-  };
-
   handleCloseMoveModal = () => (this.moveModalOpen = false);
   handleOpenMoveModal = () => (this.moveModalOpen = true);
 
@@ -338,20 +316,14 @@ class DocumentScene extends React.Component<Props> {
       document,
       revision,
       readOnly,
-      location,
       abilities,
       auth,
       ui,
       match,
     } = this.props;
     const team = auth.team;
-    const Editor = this.editorComponent;
     const isShare = !!match.params.shareId;
 
-    if (!Editor) {
-      return <Loading location={location} />;
-    }
-
     const value = revision ? revision.text : document.text;
     const injectTemplate = document.injectTemplate;
     const disableEmbeds =

app/scenes/Document/components/Editor.js

@@ -3,7 +3,6 @@ import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
 import Textarea from "react-autosize-textarea";
-import RichMarkdownEditor from "rich-markdown-editor";
 import styled from "styled-components";
 import parseTitle from "shared/utils/parseTitle";
 import Document from "models/Document";
@@ -12,6 +11,7 @@ import DocumentMetaWithViews from "components/DocumentMetaWithViews";
 import Editor from "components/Editor";
 import Flex from "components/Flex";
 import HoverPreview from "components/HoverPreview";
+import LoadingPlaceholder from "components/LoadingPlaceholder";
 import { documentHistoryUrl } from "utils/routeHelpers";
 
 type Props = {
@@ -27,7 +27,7 @@ type Props = {
 @observer
 class DocumentEditor extends React.Component<Props> {
   @observable activeLinkEvent: ?MouseEvent;
-  editor = React.createRef<RichMarkdownEditor>();
+  editor = React.createRef<any>();
 
   focusAtStart = () => {
     if (this.editor.current) {
@@ -78,39 +78,43 @@ class DocumentEditor extends React.Component<Props> {
 
     return (
       <Flex auto column>
-        <Title
-          type="text"
-          onChange={onChangeTitle}
-          onKeyDown={this.handleTitleKeyDown}
-          placeholder={document.placeholder}
-          value={!title && readOnly ? document.titleWithDefault : title}
-          style={startsWithEmojiAndSpace ? { marginLeft: "-1.2em" } : undefined}
-          readOnly={readOnly}
-          autoFocus={!title}
-          maxLength={100}
-        />
-        <DocumentMetaWithViews
-          isDraft={isDraft}
-          document={document}
-          to={documentHistoryUrl(document)}
-        />
-        <Editor
-          ref={this.editor}
-          autoFocus={title && !this.props.defaultValue}
-          placeholder="…the rest is up to you"
-          onHoverLink={this.handleLinkActive}
-          scrollTo={window.location.hash}
-          grow
-          {...this.props}
-        />
-        {!readOnly && <ClickablePadding onClick={this.focusAtEnd} grow />}
-        {this.activeLinkEvent && !isShare && readOnly && (
-          <HoverPreview
-            node={this.activeLinkEvent.target}
-            event={this.activeLinkEvent}
-            onClose={this.handleLinkInactive}
+        <React.Suspense fallback={<LoadingPlaceholder />}>
+          <Title
+            type="text"
+            onChange={onChangeTitle}
+            onKeyDown={this.handleTitleKeyDown}
+            placeholder={document.placeholder}
+            value={!title && readOnly ? document.titleWithDefault : title}
+            style={
+              startsWithEmojiAndSpace ? { marginLeft: "-1.2em" } : undefined
+            }
+            readOnly={readOnly}
+            autoFocus={!title}
+            maxLength={100}
           />
-        )}
+          <DocumentMetaWithViews
+            isDraft={isDraft}
+            document={document}
+            to={documentHistoryUrl(document)}
+          />
+          <Editor
+            ref={this.editor}
+            autoFocus={title && !this.props.defaultValue}
+            placeholder="…the rest is up to you"
+            onHoverLink={this.handleLinkActive}
+            scrollTo={window.location.hash}
+            grow
+            {...this.props}
+          />
+          {!readOnly && <ClickablePadding onClick={this.focusAtEnd} grow />}
+          {this.activeLinkEvent && !isShare && readOnly && (
+            <HoverPreview
+              node={this.activeLinkEvent.target}
+              event={this.activeLinkEvent}
+              onClose={this.handleLinkInactive}
+            />
+          )}
+        </React.Suspense>
       </Flex>
     );
   }