드론교통시스템 lazyload 적용

src/components/map/mapbox/MapBoxMap.js

@@ -1,4 +1,11 @@
-import { useEffect, useState, useRef, useLayoutEffect } from 'react';
+import {
+  useEffect,
+  useState,
+  useRef,
+  useLayoutEffect,
+  lazy,
+  Suspense
+} from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 // mapbox

src/views/control/main/ControlMain.js

@@ -1,8 +1,6 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, lazy, Suspense } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
-import '../../../assets/css/custom.css';
-import logo from '../../../assets/images/logo/kac_logo_ icon.svg';
-
 import {
   Sun,
   Map,
@@ -13,20 +11,21 @@ import {
   CloudSnow,
   Grid
 } from 'react-feather';
-
 import { AiOutlinePoweroff } from 'react-icons/ai';
 import { IoAlertOutline } from 'react-icons/io5';
-import { ReactComponent as DroneMenuIcon } from '../../../assets/images/drone_menu_icon.svg';
 import { Card } from 'reactstrap';
-import ControlReportList from '../report/ControlReportList';
-import ControlReportDetail from '../report/ControlReportDetail';
-import ControlAlarmList from '../alarm/ControlAlarmList';
 import ControlSetting from '../setting/ControlSetting';
 import WebsocketClient from '../../../components/websocket/WebsocketClient';
-import { useDispatch, useSelector } from 'react-redux';
 import { controlweatherAction } from '../../../modules/control/gp/actions/controlGpAction';
 import * as Actions from '../../../modules/account/login/actions/authAction';
 import { objectUnClickAction } from '../../../modules/control/map/actions/controlMapActions';
+import '../../../assets/css/custom.css';
+import { ReactComponent as DroneMenuIcon } from '../../../assets/images/drone_menu_icon.svg';
+import logo from '../../../assets/images/logo/kac_logo_ icon.svg';
+
+const ControlReportList = lazy(() => import('../report/ControlReportList'));
+const ControlReportDetail = lazy(() => import('../report/ControlReportDetail'));
+const ControlAlarmList = lazy(() => import('../alarm/ControlAlarmList'));
 
 const ControlMain = () => {
   const dispatch = useDispatch();
@@ -293,18 +292,24 @@ const ControlMain = () => {
       </div>
 
       {oepnReportList ? (
+        <Suspense fallback=''>
           <ControlReportList setOpenReportList={setOpenReportList} />
+        </Suspense>
       ) : (
         <div />
       )}
       {isClickObject ? (
+        <Suspense fallback=''>
           <ControlReportDetail handlerClose={handlerClose} />
+        </Suspense>
       ) : (
         <div />
       )}
 
       {openAlarmList ? (
+        <Suspense fallback=''>
           <ControlAlarmList setOpenAlarmList={setOpenAlarmList} />
+        </Suspense>
       ) : (
         <div />
       )}