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

This commit is contained in:
Alexander Nanberg
2019-02-05 22:49:27 +01:00
committed by Shawn Erquhart
parent 0aae3be1b5
commit 9aa56457e2
5 changed files with 55 additions and 35 deletions

View File

@ -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",

View File

@ -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>
<Redirect exact from="/" to={defaultPath} />
<Redirect exact from="/search/" to={defaultPath} />
{hasWorkflow ? <Route path="/workflow" component={Workflow} /> : null}
<Route exact path="/collections/:name" component={Collection} />
<Route
path="/collections/:name/new"
render={props => <Editor {...props} newRecord />}
/>
<Route path="/collections/:name/entries/:slug" component={Editor} />
<Route
path="/search/:searchTerm"
render={props => <Collection {...props} isSearchResults />}
/>
<Route component={NotFoundPage} />
</Switch>
{useMediaLibrary ? <MediaLibrary /> : null}
<Suspense fallback={<Loader active />}>
<Switch>
<Redirect exact from="/" to={defaultPath} />
<Redirect exact from="/search/" to={defaultPath} />
{hasWorkflow ? <Route path="/workflow" component={Workflow} /> : null}
<Route exact path="/collections/:name" component={Collection} />
<Route
path="/collections/:name/new"
render={props => <Editor {...props} newRecord />}
/>
<Route path="/collections/:name/entries/:slug" component={Editor} />
<Route
path="/search/:searchTerm"
render={props => <Collection {...props} isSearchResults />}
/>
<Route component={NotFoundPage} />
</Switch>
{useMediaLibrary ? <MediaLibrary /> : null}
</Suspense>
</AppMainContainer>
</>
);