配置优化

src/App.jsx

-import React from 'react';
+import React, { Suspense, lazy } from 'react';
 import { withRouter, NavLink, Switch, Route, Redirect } from 'react-router-dom';
 
 import Home from './pages/home';
-import JobList from './pages/user/JobList';
-import AddMaterial from './pages/user/addMaterial';
-import TrainList from './pages/user/TrainList';
-import Train from './pages/user/Train';
-import Pay from './pages/pay/pay';
+const JobList = lazy(() => import('./pages/user/JobList'));
+const AddMaterial = lazy(() => import('./pages/user/addMaterial'));
+const TrainList = lazy(() => import('./pages/user/TrainList'));
+const Train = lazy(() => import('./pages/user/Train'));
 
 import NotFind from './pages/404';
 
 import storage from '@/utils/storage.plugin';
 import vc from '@/utils/vconsole';
+
 //第二页，分类模块的文件使用react-loadable按需加载并且代码分割
 class App extends React.Component {
   constructor(props) {
@@ -52,6 +52,7 @@ class App extends React.Component {
     return (
       <div className="container">
         <div className="page-content">
+          <Suspense fallback={<div />}>
             <Switch>
               <Route path="/user/job/add" key="add-job" component={AddMaterial} />
               <Route path="/user/job/:id" key="edit-job" component={AddMaterial} />
@@ -59,9 +60,9 @@ class App extends React.Component {
               <Route path="/user/train/add" key="add-train" component={Train} />
               <Route path="/user/train/:id" key="edit-train" component={Train} />
               <Route path="/user/train" component={TrainList} />
-            <Route path="/pay" component={Pay} />
               <Route component={JobList} />
             </Switch>
+          </Suspense>
         </div>
       </div>
     );