增加懒加载

package.json

@@ -33,6 +33,7 @@
     "react-dnd": "^14.0.2",
     "react-dnd-html5-backend": "^14.0.0",
     "react-dom": "^17.0.1",
+    "react-loadable": "^5.5.0",
     "react-redux": "^7.1.0",
     "react-resizable": "^3.0.4",
     "react-router-dom": "^5.0.1",

src/App.js

@@ -5,27 +5,29 @@ import {
 } from 'react-router-dom';
 
 import { ContextPath } from './util';
-import Signin from './view/Signin';
-import Home from './view/Home';
-import Manage from './view/Manage';
-import Model from './view/Manage/Model';
-import ModelConfig from './view/Manage/ModelConfig';
-import AssetManage from './view/Manage/AssetManage';
-import AssetResourceBrowse from './view/Manage/AssetResourceBrowse';
-import AssetBrowse from './view/Manage/AssetBrowse';
-import AssetRecycle from './view/Manage/AssetRecycle';
-import DatasourceManage from './view/Manage/DatasourceManage';
-import AssetDetailPage from './view/Manage/AssetManage/Component/AssetDetailPage';
-import AssetDetail from './view/Manage/AssetManage/Component/AssetDetail';
-import ImportAction from './view/Manage/Model/Component/ImportAction';
-import EditModel from './view/Manage/Model/Component/EditModel';
-import EditTemplate from './view/Manage/ModelConfig/Component/EditTemplate';
-import AssetTree from './view/Manage/AssetManage/Component/AssetTree';
+import loadable from "./util/loadable";
 
 import { AssetMountReference } from './util/constant';
 
 export const AppContext = React.createContext();
 
+const Signin = loadable(()=> import('./view/Signin'));
+const Home = loadable(()=> import('./view/Home'));
+const Manage = loadable(()=> import('./view/Manage'));
+const Model = loadable(()=> import('./view/Manage/Model'));
+const ModelConfig = loadable(()=> import('./view/Manage/ModelConfig'));
+const AssetManage = loadable(()=> import('./view/Manage/AssetManage'));
+const AssetResourceBrowse = loadable(()=> import('./view/Manage/AssetResourceBrowse'));
+const AssetBrowse = loadable(()=> import('./view/Manage/AssetBrowse'));
+const AssetRecycle = loadable(()=> import('./view/Manage/AssetRecycle'));
+const DatasourceManage = loadable(()=> import('./view/Manage/DatasourceManage'));
+const AssetDetailPage = loadable(()=> import('./view/Manage/AssetManage/Component/AssetDetailPage'));
+const AssetDetail = loadable(()=> import('./view/Manage/AssetManage/Component/AssetDetail'));
+const ImportAction = loadable(()=> import('./view/Manage/Model/Component/ImportAction'));
+const EditModel = loadable(()=> import('./view/Manage/Model/Component/EditModel'));
+const EditTemplate = loadable(()=> import('./view/Manage/ModelConfig/Component/EditTemplate'));
+const AssetTree = loadable(()=> import('./view/Manage/AssetManage/Component/AssetTree'));
+
 export class App extends React.Component {
 
   render() {

src/util/loadable.js

+import React from "react"
+import Loadable from 'react-loadable';
+import { Spin } from "antd";
+
+const loadingComponent =()=>{
+  return (
+    <div style={{ width: '100%', textAlign: 'center' }}>
+      <Spin spinning={true} style={{marginTop:'45vh'}} tip="数据加载中......" />
+    </div>
+  ) 
+}
+  
+const loadable = ( loaders ) => {
+  return Loadable( {
+    loader: loaders,
+    delay: 10000,
+    timeout: 300,
+    loading: loadingComponent,
+  });
+};
+
+export default loadable;
\ No newline at end of file

src/view/Manage/AssetBrowse/Component/Thermodynamic.jsx

@@ -102,8 +102,8 @@ const init = (ctx) => function (container, data, onClick) {
         name: ((data||[]).length>0) ? `${data[0]?.text||''} (${data[0]?.dataAssetAndSubDirCount})` : '',
         type: 'treemap',
         height: '85%',
-        visibleMin: 0,
-        childrenVisibleMin: 0,
+        visibleMin: 1,
+        childrenVisibleMin: 1,
         label: {
           show: true,
           formatter: '{b}'