## 빌드시 초기로딩 속도에 대한 고찰 (Frist Load JS)

> 빌드 속도를 개선하고 사용자 사용시 초기 로딩 속도를 향상 시키기 위하여 이 문서를 작성한다.

```console

-- as is --
73requests | 8.5MB transferred | 29MB resources | Finish: 9.42s | DOMContentLoaded: 1.01 s | Load: 2.53s


Route (app)                                Size     First Load JS
┌ λ /                                      8.33 kB         633 kB
├ λ /analysis/[counselDivisionCode]        14.5 kB         636 kB
├ λ /analysis/not-available                4.31 kB         363 kB
├ λ /assets                                11.5 kB         661 kB
├ λ /etc                                   8.87 kB         602 kB
├ ○ /favicon.ico                           0 B                0 B
├ λ /file                                  2.96 kB         344 kB
├ λ /gateway                               3.56 kB         422 kB
├ λ /login                                 2 kB            425 kB
├ λ /market                                3.56 kB         628 kB
├ λ /mts                                   7.2 kB          375 kB
├ λ /sample                                10.5 kB         664 kB
└ λ /sample/backup                         142 B          80.1 kB
+ First Load JS shared by all              80 kB
  ├ chunks/7839-4550171616e94fb7.js        27.3 kB
  ├ chunks/bce60fc1-c2e93daaf00d5912.js    50.5 kB
  ├ chunks/main-app-ee2ba3384bf7bca4.js    227 B
  └ chunks/webpack-251a6c35d38a66b4.js     1.97 kB
```

위의 빌드 결과를 보았을때 /Assets 쪽에서 Size, FirstLoadJs값이 큰것을 확인 할 수 있음.

위를 개선해보고자 컴포넌트화 및 Dyniamic import 처리를 진행할것임

```console

-- to be --
73requests | 8.4MB transferred | 28.7MB resources | Finish: 8.66s | DOMContentLoaded: 358 ms | Load: 2.05s

Route (app)                                Size     First Load JS
┌ λ /                                      8.33 kB         633 kB
├ λ /analysis/[counselDivisionCode]        14.5 kB         636 kB
├ λ /analysis/not-available                4.31 kB         363 kB
├ λ /assets                               9.03 kB         657 kB
├ λ /etc                                   8.87 kB         602 kB
├ ○ /favicon.ico                           0 B                0 B
├ λ /file                                  2.96 kB         344 kB
├ λ /gateway                               3.56 kB         422 kB
├ λ /login                                 2 kB            425 kB
├ λ /market                                3.56 kB         629 kB
├ λ /mts                                   7.2 kB          375 kB
├ λ /sample                                12 kB           665 kB
└ λ /sample/backup                         142 B          80.2 kB
+ First Load JS shared by all              80 kB
  ├ chunks/7839-4550171616e94fb7.js        27.3 kB
  ├ chunks/bce60fc1-c2e93daaf00d5912.js    50.5 kB
  ├ chunks/main-app-ee2ba3384bf7bca4.js    227 B
  └ chunks/webpack-8d53428a2b9471a1.js     2.02 kB

  ```

/assets를 보면 수치상으로도 동적호출로 전환하였을때 용량이 줄어들고 초기로드속도가 빨라지는것을 확인 할 수 있음. 이것에 초기 로딩될때 필요하지 않은것들을 동적호출로 전환한다.

MUI까지 동적 호출을 처리 하였을때

```console

ute (app)                                Size     First Load JS
┌ λ /                                      10.3 kB         637 kB
├ λ /analysis/[counselDivisionCode]        15.1 kB         640 kB
├ λ /analysis/not-available                4.3 kB          363 kB
├ λ /assets                                13.7 kB         446 kB
├ λ /etc                                   9.96 kB         603 kB
├ ○ /favicon.ico                           0 B                0 B
├ λ /file                                  2.96 kB         344 kB
├ λ /gateway                               3.56 kB         423 kB
├ λ /login                                 2.02 kB         425 kB
├ λ /market                                5.64 kB         633 kB
├ λ /mts                                   9.42 kB         375 kB
├ λ /sample                                36.1 kB         667 kB
└ λ /sample/backup                         142 B          80.8 kB
+ First Load JS shared by all              80.7 kB
  ├ chunks/7839-4550171616e94fb7.js        27.3 kB
  ├ chunks/bce60fc1-c2e93daaf00d5912.js    50.5 kB
  ├ chunks/main-app-ee2ba3384bf7bca4.js    227 B
  └ chunks/webpack-3f67b64ace555e15.js     2.64 kB

```

위와 같이 초기로딩속도는 감소하였지만 파일용량 자체가 커져버리는 이슈가 발생하였다. 이는 이후 컴포넌트베이스로 다시 구조를 짜면 용량이 줄어들것임.

178라인 컴포넌트 동적호출 처리

```console
Route (app)                                Size     First Load JS
┌ λ /                                      10.3 kB         637 kB
├ λ /analysis/[counselDivisionCode]        15.1 kB         640 kB
├ λ /analysis/not-available                4.3 kB          363 kB
├ λ /assets                                13 kB           445 kB
├ λ /etc                                   9.96 kB         603 kB
├ ○ /favicon.ico                           0 B                0 B
├ λ /file                                  2.96 kB         344 kB
├ λ /gateway                               3.56 kB         423 kB
├ λ /login                                 2.02 kB         425 kB
├ λ /market                                5.64 kB         633 kB
├ λ /mts                                   9.42 kB         375 kB
├ λ /sample                                36.1 kB         667 kB
└ λ /sample/backup                         142 B          80.8 kB
+ First Load JS shared by all              80.7 kB
  ├ chunks/7839-4550171616e94fb7.js        27.3 kB
  ├ chunks/bce60fc1-c2e93daaf00d5912.js    50.5 kB
  ├ chunks/main-app-ee2ba3384bf7bca4.js    227 B
  └ chunks/webpack-2bb5a5c391878cdc.js     2.66 kB

Route (pages)                              Size     First Load JS
┌ ○ /404                                   185 B          82.8 kB
├ λ /api/airBridge                         0 B            82.6 kB
├ λ /api/apiLogs                           0 B            82.6 kB
├ λ /api/destroySession                    0 B            82.6 kB
├ λ /api/getSessions                       0 B            82.6 kB
└ λ /api/setSessions                       0 B            82.6 kB
+ First Load JS shared by all              82.6 kB
  ├ chunks/framework-4498e84bb0ba1830.js   45.1 kB
  ├ chunks/main-fbfceeefa1e04435.js        34.7 kB
  ├ chunks/pages/_app-0fe44225c17aa1f2.js  199 B
  └ chunks/webpack-2bb5a5c391878cdc.js     2.66 kB

```

theme 호출 된거 삭제 SwipeableViews 컴포넌트의 axis에서만 사용하고 있었음 한국은 그냥 axis="x" 로 하면 됨

```console
Route (app)                                Size     First Load JS
┌ λ /                                      10.3 kB         637 kB
├ λ /analysis/[counselDivisionCode]        15.1 kB         640 kB
├ λ /analysis/not-available                4.3 kB          363 kB
├ λ /assets                                13 kB           445 kB
├ λ /etc                                   9.96 kB         603 kB
├ ○ /favicon.ico                           0 B                0 B
├ λ /file                                  2.96 kB         344 kB
├ λ /gateway                               3.56 kB         423 kB
├ λ /login                                 2.02 kB         425 kB
├ λ /market                                5.64 kB         633 kB
├ λ /mts                                   9.42 kB         375 kB
├ λ /sample                                36.1 kB         667 kB
└ λ /sample/backup                         142 B          80.8 kB
+ First Load JS shared by all              80.7 kB
  ├ chunks/7839-4550171616e94fb7.js        27.3 kB
  ├ chunks/bce60fc1-c2e93daaf00d5912.js    50.5 kB
  ├ chunks/main-app-ee2ba3384bf7bca4.js    227 B
  └ chunks/webpack-2bb5a5c391878cdc.js     2.66 kB


```