8.1 KiB
8.1 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