diff --git a/babel.config.js b/babel.config.js index 9974bb8e..c525bd12 100644 --- a/babel.config.js +++ b/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) { diff --git a/package.json b/package.json index 44aca783..8d0d1af0 100644 --- a/package.json +++ b/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", diff --git a/packages/netlify-cms-core/package.json b/packages/netlify-cms-core/package.json index da45974d..3bfce17a 100644 --- a/packages/netlify-cms-core/package.json +++ b/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", diff --git a/packages/netlify-cms-core/src/components/App/App.js b/packages/netlify-cms-core/src/components/App/App.js index 41f8d344..77941f47 100644 --- a/packages/netlify-cms-core/src/components/App/App.js +++ b/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 { /> {isFetching && } - - - - {hasWorkflow ? : null} - - } - /> - - } - /> - - - {useMediaLibrary ? : null} + }> + + + + {hasWorkflow ? : null} + + } + /> + + } + /> + + + {useMediaLibrary ? : null} + ); diff --git a/yarn.lock b/yarn.lock index f2854823..d96ee39f 100644 --- a/yarn.lock +++ b/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: - version "16.4.2" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.4.2.tgz#4afed569689f2c561d2b8da0b819669c38a0bda4" - integrity sha512-Usl73nQqzvmJN+89r97zmeUpQDKDlh58eX6Hbs/ERdDHzeBzWy+ENk7fsGQ+5KxArV1iOFPT46/VneklK9zoWw== +react-dom@^16.6.3: + version "16.6.3" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.6.3.tgz#8fa7ba6883c85211b8da2d0efeffc9d3825cccc0" + 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: - version "16.4.2" - resolved "https://registry.yarnpkg.com/react/-/react-16.4.2.tgz#2cd90154e3a9d9dd8da2991149fdca3c260e129f" - integrity sha512-dMv7YrbxO4y2aqnvA7f/ik9ibeLSHQJTI6TrYAenPSaQ6OXfb+Oti+oJiy8WBxgRzlKatYqtCjphTgDSCEiWFg== +react@^16.6.3: + version "16.6.3" + resolved "https://registry.yarnpkg.com/react/-/react-16.6.3.tgz#25d77c91911d6bbdd23db41e70fb094cc1e0871c" + 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"