perf(netlify-cms-core): add basic route code-splitting (#1889)

babel.config.js

@@ -29,6 +29,7 @@ const plugins = () => {
     '@babel/plugin-proposal-class-properties',
     '@babel/plugin-proposal-object-rest-spread',
     '@babel/plugin-proposal-export-default-from',
+    '@babel/plugin-syntax-dynamic-import',
   ];
 
   if (isProduction) {

package.json

@@ -51,6 +51,7 @@
     "@babel/plugin-proposal-class-properties": "^7.1.0",
     "@babel/plugin-proposal-export-default-from": "^7.0.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
     "all-contributors-cli": "^4.4.0",

packages/netlify-cms-core/package.json

@@ -39,10 +39,10 @@
     "netlify-cms-ui-default": "^2.2.0",
     "node-polyglot": "^2.3.0",
     "prop-types": "^15.5.10",
-    "react": "^16.4.1",
+    "react": "^16.6.3",
     "react-dnd": "^7.0.0",
     "react-dnd-html5-backend": "^7.0.0",
-    "react-dom": "^16.0.0",
+    "react-dom": "^16.6.3",
     "react-emotion": "^9.2.5",
     "react-frame-component": "^4.0.2",
     "react-hot-loader": "^4.0.0",

packages/netlify-cms-core/src/components/App/App.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { Suspense } from 'react';
 import { hot } from 'react-hot-loader';
 import { translate } from 'react-polyglot';
 import ImmutablePropTypes from 'react-immutable-proptypes';
@@ -18,12 +18,13 @@ import { Toast } from 'UI';
 import { Loader, colors } from 'netlify-cms-ui-default';
 import history from 'Routing/history';
 import { SIMPLE, EDITORIAL_WORKFLOW } from 'Constants/publishModes';
-import Collection from 'Collection/Collection';
-import Workflow from 'Workflow/Workflow';
-import Editor from 'Editor/Editor';
 import NotFoundPage from './NotFoundPage';
 import Header from './Header';
 
+const Collection = React.lazy(() => import(/* webpackPreload: true */ '../Collection/Collection'));
+const Workflow = React.lazy(() => import(/* webpackPreload: true */ '../Workflow/Workflow'));
+const Editor = React.lazy(() => import(/* webpackPreload: true */ '../Editor/Editor'));
+
 TopBarProgress.config({
   barColors: {
     '0': colors.active,
@@ -173,23 +174,25 @@ class App extends React.Component {
         />
         <AppMainContainer>
           {isFetching && <TopBarProgress />}
-          <Switch>
+          <Suspense fallback={<Loader active />}>
-            <Redirect exact from="/" to={defaultPath} />
+            <Switch>
-            <Redirect exact from="/search/" to={defaultPath} />
+              <Redirect exact from="/" to={defaultPath} />
-            {hasWorkflow ? <Route path="/workflow" component={Workflow} /> : null}
+              <Redirect exact from="/search/" to={defaultPath} />
-            <Route exact path="/collections/:name" component={Collection} />
+              {hasWorkflow ? <Route path="/workflow" component={Workflow} /> : null}
-            <Route
+              <Route exact path="/collections/:name" component={Collection} />
-              path="/collections/:name/new"
+              <Route
-              render={props => <Editor {...props} newRecord />}
+                path="/collections/:name/new"
-            />
+                render={props => <Editor {...props} newRecord />}
-            <Route path="/collections/:name/entries/:slug" component={Editor} />
+              />
-            <Route
+              <Route path="/collections/:name/entries/:slug" component={Editor} />
-              path="/search/:searchTerm"
+              <Route
-              render={props => <Collection {...props} isSearchResults />}
+                path="/search/:searchTerm"
-            />
+                render={props => <Collection {...props} isSearchResults />}
-            <Route component={NotFoundPage} />
+              />
-          </Switch>
+              <Route component={NotFoundPage} />
-          {useMediaLibrary ? <MediaLibrary /> : null}
+            </Switch>
+            {useMediaLibrary ? <MediaLibrary /> : null}
+          </Suspense>
         </AppMainContainer>
       </>
     );

yarn.lock

@@ -406,6 +406,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-dynamic-import@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.0.0.tgz#6dfb7d8b6c3be14ce952962f658f3b7eb54c33ee"
+  integrity sha512-Gt9xNyRrCHCiyX/ZxDGOcBnlJl0I3IWicpZRC4CdC0P5a/I07Ya2OAMEBU+J7GmRFVmIetqEYRko6QYRuKOESw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
 "@babel/plugin-syntax-export-default-from@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-default-from/-/plugin-syntax-export-default-from-7.0.0.tgz#084b639bce3d42f3c5bf3f68ccb42220bb2d729d"
@@ -9611,15 +9618,15 @@ react-dnd@^7.0.0:
     recompose "^0.30.0"
     shallowequal "^1.1.0"
 
-react-dom@^16.0.0:
+react-dom@^16.6.3:
-  version "16.4.2"
+  version "16.6.3"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.4.2.tgz#4afed569689f2c561d2b8da0b819669c38a0bda4"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.6.3.tgz#8fa7ba6883c85211b8da2d0efeffc9d3825cccc0"
-  integrity sha512-Usl73nQqzvmJN+89r97zmeUpQDKDlh58eX6Hbs/ERdDHzeBzWy+ENk7fsGQ+5KxArV1iOFPT46/VneklK9zoWw==
+  integrity sha512-8ugJWRCWLGXy+7PmNh8WJz3g1TaTUt1XyoIcFN+x0Zbkoz+KKdUyx1AQLYJdbFXjuF41Nmjn5+j//rxvhFjgSQ==
   dependencies:
-    fbjs "^0.8.16"
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.0"
+    prop-types "^15.6.2"
+    scheduler "^0.11.2"
 
 react-emotion@^9.2.5:
   version "9.2.6"
@@ -9884,15 +9891,15 @@ react-waypoint@^8.1.0:
     prop-types "^15.0.0"
     react-is "^16.6.3"
 
-react@^16.4.1:
+react@^16.6.3:
-  version "16.4.2"
+  version "16.6.3"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.4.2.tgz#2cd90154e3a9d9dd8da2991149fdca3c260e129f"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.6.3.tgz#25d77c91911d6bbdd23db41e70fb094cc1e0871c"
-  integrity sha512-dMv7YrbxO4y2aqnvA7f/ik9ibeLSHQJTI6TrYAenPSaQ6OXfb+Oti+oJiy8WBxgRzlKatYqtCjphTgDSCEiWFg==
+  integrity sha512-zCvmH2vbEolgKxtqXL2wmGCUxUyNheYn/C+PD1YAjfxHC54+MhdruyhO7QieQrYsYeTxrn93PM2y0jRH1zEExw==
   dependencies:
-    fbjs "^0.8.16"
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.0"
+    prop-types "^15.6.2"
+    scheduler "^0.11.2"
 
 read-cmd-shim@^1.0.1:
   version "1.0.1"
@@ -10605,6 +10612,14 @@ sax@^1.2.4, sax@~1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
+scheduler@^0.11.2:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.11.2.tgz#a8db5399d06eba5abac51b705b7151d2319d33d3"
+  integrity sha512-+WCP3s3wOaW4S7C1tl3TEXp4l9lJn0ZK8G3W3WKRWmw77Z2cIFUW2MiNTMHn5sCjxN+t7N43HAOOgMjyAg5hlg==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^0.4.4, schema-utils@^0.4.5:
   version "0.4.5"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.5.tgz#21836f0608aac17b78f9e3e24daff14a5ca13a3e"