156 lines
8.1 KiB
Markdown
156 lines
8.1 KiB
Markdown
|
## 빌드시 초기로딩 속도에 대한 고찰 (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
|
||
|
|
|
||
|
|
|
||
|
|
```
|