12 KiB
12 KiB
빌드시 초기로딩 속도에 대한 고찰 (Frist Load JS)
빌드 속도를 개선하고 사용자 사용시 초기 로딩 속도를 향상 시키기 위하여 이 문서를 작성한다.
-- 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 처리를 진행할것임
-- 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까지 동적 호출을 처리 하였을때
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라인 컴포넌트 동적호출 처리
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" 로 하면 됨
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
엘레멘트영역을 컴포넌트화 시키고 state를 컴포넌트에 넣음
Route (app) Size First Load JS
┌ λ / 11.3 kB 637 kB
├ λ /analysis/[counselDivisionCode] 13.6 kB 641 kB
├ λ /analysis/not-available 5.59 kB 365 kB
├ λ /assets 11.9 kB 443 kB
├ λ /etc 10.1 kB 604 kB
├ ○ /favicon.ico 0 B 0 B
├ λ /file 2.96 kB 344 kB
├ λ /gateway 4.31 kB 423 kB
├ λ /login 1.94 kB 426 kB
├ λ /market 6.72 kB 633 kB
├ λ /mts 9.45 kB 375 kB
├ λ /sample 37.7 kB 668 kB
└ λ /sample/backup 142 B 80.9 kB
Route (pages) Size First Load JS
┌ ○ /404 185 B 82.9 kB
├ λ /api/airBridge 0 B 82.7 kB
├ λ /api/apiLogs 0 B 82.7 kB
├ λ /api/destroySession 0 B 82.7 kB
├ λ /api/getSessions 0 B 82.7 kB
└ λ /api/setSessions 0 B 82.7 kB
First Load JS shared by all 82.7 kB
├ chunks/framework-4498e84bb0ba1830.js 45.1 kB
├ chunks/main-fbfceeefa1e04435.js 34.7 kB
├ chunks/pages/_app-0fe44225c17aa1f2.js 199 B
└ chunks/webpack-5a5a886075295cfd.js 2.72 kB
ƒ Middleware 43.7 kB
assets에서 first load js는 더 이상 감소하지 않지만 size는 1.1kB 감소함.
login --> assets 로딩 속도 비교
login페이지 네트워크 spec
32 requests
7.7 MB transferred
22.5 MB resources
Finish: 1.82 s
DOMContentLoaded: 378 ms
Load: 1.56 s
기존 660kB
login --> assets 네트워크 spec
74 requests
11.4 MB transferred
38.4 MB resources
Finish: 1.5 min
DOMContentLoaded: 378 ms
Load: 1.56 s
assets refresh 네트워크 spec (clear cache)
85 requests
8.5 MB transferred
28.9 MB resources
Finish: 6.59 s
DOMContentLoaded: 257 ms
Load: 2.01 s
개선 440kB
login --> assets 네트워크 spec
93 requests
10.3 MB transferred
33.1 MB resources
Finish: 18.81 s
DOMContentLoaded: 307 ms
Load: 1.55 s
assets refresh 네트워크 spec (clear cache)
69 requests
7.3 MB transferred
23.6 MB resources
Finish: 8.97 s
DOMContentLoaded: 331 ms
Load: 1.45 s
각각의 컴포넌트에서 api가 필요한것들은 컴포넌트 내에서 불러오도록 처리하였다. 해당 컴포넌트가 렌더링 되지 않는 조건이라면 api호출이 되지 않는다. 속도는 증가하지 않았지만 리소스, 전송량은 감소함 (랜더링을 컴포넌트로 아예 막고 있기 때문에 자잘한 상태 랜더링이 일어나지 않아 그런듯)
추가 정리 spinner, cookieinfo를 layout에 통합
login 네트워크 spec
49 requests
10.2 MB transferred
25.6 MB resources
Finish: 8.96 s
DOMContentLoaded: 249 ms
Load: 1.53 s