diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js
index aceb90b2..722fe09e 100644
--- a/src/components/map/mapbox/MapBoxMap.js
+++ b/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
diff --git a/src/views/control/main/ControlMain.js b/src/views/control/main/ControlMain.js
index 4a0fb6f7..177cc3c3 100644
--- a/src/views/control/main/ControlMain.js
+++ b/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 = () => {
{oepnReportList ? (
-