Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Perf] 공통 패키지, 이벤트 패키지 build 용량 축소 #114

Merged
merged 5 commits into from
Aug 21, 2024
Merged

[Perf] 공통 패키지, 이벤트 패키지 build 용량 축소 #114

merged 5 commits into from
Aug 21, 2024

Conversation

nim-od
Copy link
Member

@nim-od nim-od commented Aug 21, 2024

🔘Part

  • 이벤트 페이지


🔎 작업 내용

  1. common package는 sourcemap, treeshake하지 않는 편이 용량 측면에서 훨씬 나았습니다

  • 했을 때

      ```bash
  CLI Building entry: {"index":"src/index.ts","components":"src/components/index.ts","utils":"src/utils/index.ts","constants":"src/constants/index.ts","types":"src/types/index.ts","theme":"src/styles/theme/index.ts","tailwindConfig":"tailwind.config.ts"}
  CLI Using tsconfig: tsconfig.json
  CLI tsup v8.2.4
  CLI Using tsup config: /Users/nimod/Development/Team4-newCar-FE/packages/common/tsup.config.ts
  CLI Target: es2022
  CLI Cleaning output folder
  CJS Build start
  ESM Build start
  CJS dist/index.cjs          1.26 KB
  CJS dist/components.cjs     417.00 B
  CJS dist/chunk-NU4I27AC.cjs 726.00 B
  CJS dist/chunk-A42MO6CF.cjs 90.99 KB
  CJS dist/constants.cjs      576.00 B
  CJS dist/chunk-3GNG2RVN.cjs 154.00 B
  CJS dist/chunk-2FEFLA5K.cjs 13.00 B
  CJS dist/tailwindConfig.cjs 537.00 B
  CJS dist/types.cjs          46.00 B
  CJS dist/theme.cjs          362.00 B
  CJS dist/chunk-QISQOIQY.cjs 9.91 KB
  CJS dist/chunk-MBGSSEZN.cjs 624.00 B
  CJS dist/chunk-PN65CTPA.cjs 2.62 KB
  CJS dist/utils.cjs          379.00 B
  CJS ⚡️ Build success in 456ms
  ESM dist/index.js          714.00 B
  ESM dist/utils.js          184.00 B
  ESM dist/chunk-2BUPSB7O.js 0 B
  ESM dist/chunk-5NCFGY6H.js 87.72 KB
  ESM dist/constants.js      319.00 B
  ESM dist/chunk-QFOMVA46.js 9.49 KB
  ESM dist/chunk-GEEX3CU3.js 62.00 B
  ESM dist/types.js          29.00 B
  ESM dist/components.js     218.00 B
  ESM dist/theme.js          151.00 B
  ESM dist/chunk-OF2MGBIE.js 2.47 KB
  ESM dist/chunk-RV4IWFR6.js 574.00 B
  ESM dist/chunk-EK7ODJWE.js 544.00 B
  ESM dist/tailwindConfig.js 288.00 B
  ESM ⚡️ Build success in 460ms
  DTS Build start
  DTS ⚡️ Build success in 3551ms
  DTS dist/index.d.cts          667.00 B
  DTS dist/tailwindConfig.d.cts 116.00 B
  DTS dist/components.d.cts     1.16 KB
  DTS dist/utils.d.cts          1.65 KB
  DTS dist/constants.d.cts      1.19 KB
  DTS dist/theme.d.cts          2.11 KB
  DTS dist/types.d.cts          100.00 B
  DTS dist/index-CAw6gK-F.d.cts 336.00 B
  DTS dist/index.d.ts           662.00 B
  DTS dist/tailwindConfig.d.ts  116.00 B
  DTS dist/components.d.ts      1.16 KB
  DTS dist/utils.d.ts           1.65 KB
  DTS dist/constants.d.ts       1.19 KB
  DTS dist/theme.d.ts           2.11 KB
  DTS dist/types.d.ts           99.00 B
  DTS dist/index-CAw6gK-F.d.ts  336.00 B
  
  Rebuilding...
  
  Done in 357ms.
  ```

  • 안했을 떄

      ```bash
  CLI Building entry: {"index":"src/index.ts","components":"src/components/index.ts","utils":"src/utils/index.ts","constants":"src/constants/index.ts","types":"src/types/index.ts","theme":"src/styles/theme/index.ts","tailwindConfig":"tailwind.config.ts"}
  CLI Using tsconfig: tsconfig.json
  CLI tsup v8.2.4
  CLI Using tsup config: /Users/nimod/Development/Team4-newCar-FE/packages/common/tsup.config.ts
  CLI Target: es2022
  CLI Cleaning output folder
  CJS Build start
  ESM Build start
  ESM dist/utils.js          184.00 B
  ESM dist/components.js     218.00 B
  ESM dist/index.js          714.00 B
  ESM dist/chunk-QFOMVA46.js 9.49 KB
  ESM dist/constants.js      319.00 B
  ESM dist/chunk-GEEX3CU3.js 62.00 B
  ESM dist/types.js          29.00 B
  ESM dist/chunk-2BUPSB7O.js 0 B
  ESM dist/theme.js          151.00 B
  ESM dist/chunk-RV4IWFR6.js 574.00 B
  ESM dist/chunk-OF2MGBIE.js 2.47 KB
  ESM dist/chunk-5NCFGY6H.js 87.72 KB
  ESM dist/chunk-EK7ODJWE.js 544.00 B
  ESM dist/tailwindConfig.js 288.00 B
  ESM ⚡️ Build success in 428ms
  CJS dist/index.cjs          1.26 KB
  CJS dist/chunk-QISQOIQY.cjs 9.91 KB
  CJS dist/components.cjs     417.00 B
  CJS dist/constants.cjs      576.00 B
  CJS dist/chunk-2FEFLA5K.cjs 13.00 B
  CJS dist/utils.cjs          379.00 B
  CJS dist/chunk-A42MO6CF.cjs 90.99 KB
  CJS dist/chunk-NU4I27AC.cjs 726.00 B
  CJS dist/tailwindConfig.cjs 537.00 B
  CJS dist/chunk-MBGSSEZN.cjs 624.00 B
  CJS dist/chunk-PN65CTPA.cjs 2.62 KB
  CJS dist/theme.cjs          362.00 B
  CJS dist/types.cjs          46.00 B
  CJS dist/chunk-3GNG2RVN.cjs 154.00 B
  CJS ⚡️ Build success in 430ms
  DTS Build start
  DTS ⚡️ Build success in 3357ms
  DTS dist/index.d.cts          667.00 B
  DTS dist/tailwindConfig.d.cts 116.00 B
  DTS dist/components.d.cts     1.16 KB
  DTS dist/utils.d.cts          1.65 KB
  DTS dist/constants.d.cts      1.19 KB
  DTS dist/theme.d.cts          2.11 KB
  DTS dist/types.d.cts          100.00 B
  DTS dist/index-CAw6gK-F.d.cts 336.00 B
  DTS dist/index.d.ts           662.00 B
  DTS dist/tailwindConfig.d.ts  116.00 B
  DTS dist/components.d.ts      1.16 KB
  DTS dist/utils.d.ts           1.65 KB
  DTS dist/constants.d.ts       1.19 KB
  DTS dist/theme.d.ts           2.11 KB
  DTS dist/types.d.ts           99.00 B
  DTS dist/index-CAw6gK-F.d.ts  336.00 B
  
  Rebuilding...
  
  Done in 332ms.
  ```
  1. 유저 패키지
  • 불필요한 라이브러리 제거 (엄밀하게 확인하진 않음... 새벽 이슈..)
  • 의존성 별 청크 분리 작업
  • tree shaking을 위한 리팩토링
vite v5.4.1 building for production...
✓ 320 modules transformed.
dist/index.html                                            2.35 kB │ gzip:  0.99 kB
dist/assets/index-CzuN246i.css                            55.54 kB │ gzip:  9.82 kB
dist/assets/TriggerButtonWrapper-DBIWlLPb.js               0.18 kB │ gzip:  0.16 kB
dist/assets/scrollToElementId-DDPST3ho.js                  0.28 kB │ gzip:  0.23 kB
dist/assets/@radix-ui/react-visually-hidden-SguwsUyG.js    0.35 kB │ gzip:  0.28 kB
dist/assets/clsx-B-dksMZM.js                               0.37 kB │ gzip:  0.24 kB
dist/assets/externalLinks-BosX4DBT.js                      0.39 kB │ gzip:  0.23 kB
dist/assets/index-p4B_vWkd.js                              0.39 kB │ gzip:  0.29 kB
dist/assets/NotFoundErrorPage-BWXJLkjY.js                  0.42 kB │ gzip:  0.32 kB
dist/assets/Chip-CukmAN1S.js                               0.48 kB │ gzip:  0.31 kB
dist/assets/ErrorPage-CfOX0uoE.js                          0.49 kB │ gzip:  0.37 kB
dist/assets/PrizeCard-BbPV3Bb1.js                          0.50 kB │ gzip:  0.36 kB
dist/assets/InViewLoadSection-BIZsEZSC.js                  0.58 kB │ gzip:  0.38 kB
dist/assets/index-DucMb8so.js                              0.76 kB │ gzip:  0.48 kB
dist/assets/input-BIpx4LTW.js                              0.80 kB │ gzip:  0.46 kB
dist/assets/withAuthHOC-CloHZ-MZ.js                        0.96 kB │ gzip:  0.55 kB
dist/assets/index-DYcZZDym.js                              1.03 kB │ gzip:  0.67 kB
dist/assets/class-variance-authority-Bb4qSo10.js           1.11 kB │ gzip:  0.56 kB
dist/assets/EventPrizes-CSqYneDM.js                        1.13 kB │ gzip:  0.73 kB
dist/assets/index-CupDpUm-.js                              1.16 kB │ gzip:  0.62 kB
dist/assets/NotStartedEventPage-DgsET6S3.js                1.24 kB │ gzip:  0.75 kB
dist/assets/OptionButton-Bd1NvgGC.js                       1.27 kB │ gzip:  0.69 kB
dist/assets/teamDescriptions-BpP-bkOj.js                   1.31 kB │ gzip:  1.10 kB
dist/assets/TeamDescriptionModal-B03NrUyo.js               1.38 kB │ gzip:  0.70 kB
dist/assets/index-Cca_IXQ3.js                              1.63 kB │ gzip:  0.76 kB
dist/assets/EventGuidelines-jj_4uKdd.js                    1.68 kB │ gzip:  1.41 kB
dist/assets/index-CkwGJD48.js                              1.91 kB │ gzip:  1.01 kB
dist/assets/index-DHunk9Gm.js                              1.99 kB │ gzip:  1.00 kB
dist/assets/index-DXavbp8S.js                              2.17 kB │ gzip:  1.37 kB
dist/assets/index-CuRdY3gg.js                              2.39 kB │ gzip:  1.31 kB
dist/assets/Modal-CcP6lFlX.js                              2.99 kB │ gzip:  1.25 kB
dist/assets/index-Btij0EGM.js                              3.45 kB │ gzip:  1.82 kB
dist/assets/index-3JSPEzNF.js                              4.65 kB │ gzip:  2.14 kB
dist/assets/index-CS35YwXC.js                              7.71 kB │ gzip:  3.32 kB
dist/assets/HomePage-DTe2RX8M.js                           7.98 kB │ gzip:  2.44 kB
dist/assets/index-CqSY8wJT.js                             10.17 kB │ gzip:  4.43 kB
dist/assets/numeral-D88IdHtb.js                           11.44 kB │ gzip:  4.03 kB
dist/assets/@radix-ui/react-toast-DlX46wEx.js             11.73 kB │ gzip:  4.21 kB
dist/assets/EventPage-Bd0LZnGr.js                         26.30 kB │ gzip:  9.97 kB
dist/assets/@tanstack/react-query-DuWZaPWu.js             37.70 kB │ gzip: 11.22 kB
dist/assets/index-C7oST73h.js                            166.61 kB │ gzip: 55.71 kB
dist/assets/@radix-ui/react-dialog-CRmj70jC.js           173.43 kB │ gzip: 56.00 kB
✓ built in 3.32s

✨ [vite-plugin-compression]:algorithm=brotliCompress - compressed file successfully: 
dist//Users/nimod/Development/Team4-newCar-FE/packages/user/assets/EventPrizes-CSqYneDM.js.br                1.22kb / brotliCompress: 0.60kb
dist//Users/nimod/Development/Team4-newCar-FE/packages/user/assets/EventGuidelines-jj_4uKdd.js.br            2.91kb / brotliCompress: 1.20kb
dist//Users/nimod/Development/Team4-newCar-FE/packages/user/assets/@radix-ui/react-toast-DlX46wEx.js.br      11.46kb / brotliCompress: 3.71kb
dist//Users/nimod/Development/Team4-newCar-FE/packages/user/assets/HomePage-DTe2RX8M.js.br                   8.29kb / brotliCompress: 2.00kb
dist//Users/nimod/Development/Team4-newCar-FE/packages/user/assets/Modal-CcP6lFlX.js.br                      2.92kb / brotliCompress: 1.06kb
dist//Users/nimod/Development/Team4-newCar-FE/packages/user/assets/OptionButton-Bd1NvgGC.js.br               1.24kb / brotliCompress: 0.60kb
dist//Users/nimod/Development/Team4-newCar-FE/packages/user/assets/TeamDescriptionModal-B03NrUyo.js.br       1.35kb / brotliCompress: 0.60kb
dist//Users/nimod/Development/Team4-newCar-FE/packages/user/assets/NotStartedEventPage-DgsET6S3.js.br        1.24kb / brotliCompress: 0.62kb
dist//Users/nimod/Development/Team4-newCar-FE/packages/user/assets/class-variance-authority-Bb4qSo10.js.br   1.08kb / brotliCompress: 0.49kb
dist//Users/nimod/Development/Team4-newCar-FE/packages/user/assets/index-Btij0EGM.js.br                      3.72kb / brotliCompress: 1.53kb
dist//Users/nimod/Development/Team4-newCar-FE/packages/user/assets/EventPage-Bd0LZnGr.js.br                  26.21kb / brotliCompress: 8.46kb
dist//Users/nimod/Development/Team4-newCar-FE/packages/user/assets/index-3JSPEzNF.js.br                      5.28kb / brotliCompress: 1.81kb
dist//Users/nimod/Development/Team4-newCar-FE/packages/user/assets/index-CS35YwXC.js.br                      7.86kb / brotliCompress: 2.81kb
dist//Users/nimod/Development/Team4-newCar-FE/packages/user/assets/index-Cca_IXQ3.js.br                      1.59kb / brotliCompress: 0.64kb
dist//Users/nimod/Development/Team4-newCar-FE/packages/user/assets/@tanstack/react-query-DuWZaPWu.js.br      36.81kb / brotliCompress: 9.84kb
dist//Users/nimod/Development/Team4-newCar-FE/packages/user/assets/index-CkwGJD48.js.br                      2.05kb / brotliCompress: 0.81kb
dist//Users/nimod/Development/Team4-newCar-FE/packages/user/assets/index-CupDpUm-.js.br                      1.13kb / brotliCompress: 0.52kb
dist//Users/nimod/Development/Team4-newCar-FE/packages/user/assets/index-CuRdY3gg.js.br                      2.46kb / brotliCompress: 1.06kb
dist//Users/nimod/Development/Team4-newCar-FE/packages/user/assets/index-DXavbp8S.js.br                      2.59kb / brotliCompress: 1.14kb
dist//Users/nimod/Development/Team4-newCar-FE/packages/user/assets/index-DYcZZDym.js.br                      1.06kb / brotliCompress: 0.54kb
dist//Users/nimod/Development/Team4-newCar-FE/packages/user/assets/teamDescriptions-BpP-bkOj.js.br           2.07kb / brotliCompress: 0.93kb
dist//Users/nimod/Development/Team4-newCar-FE/packages/user/assets/index-CqSY8wJT.js.br                      10.25kb / brotliCompress: 3.65kb
dist//Users/nimod/Development/Team4-newCar-FE/packages/user/index.html.br                                    2.83kb / brotliCompress: 0.73kb
dist//Users/nimod/Development/Team4-newCar-FE/packages/user/assets/index-DHunk9Gm.js.br                      2.00kb / brotliCompress: 0.83kb
dist//Users/nimod/Development/Team4-newCar-FE/packages/user/assets/numeral-D88IdHtb.js.br                    11.17kb / brotliCompress: 3.60kb
dist//Users/nimod/Development/Team4-newCar-FE/packages/user/assets/index-CzuN246i.css.br                     54.24kb / brotliCompress: 7.93kb
dist//Users/nimod/Development/Team4-newCar-FE/packages/user/assets/index-C7oST73h.js.br                      163.40kb / brotliCompress: 47.55kb
dist//Users/nimod/Development/Team4-newCar-FE/packages/user/assets/@radix-ui/react-dialog-CRmj70jC.js.br     169.37kb / brotliCompress: 47.83kb



✨ [vite-plugin-imagemin]- compressed image resource successfully: 
dist/cursor/cursor-50.png    -50%  1.84kb / tiny: 0.93kb
dist/images/kakao-login.png  -76%  2.88kb / tiny: 0.71kb
dist/link/og-pet.png         -71%  75.04kb / tiny: 22.24kb
dist/link/og-space.png       -71%  237.46kb / tiny: 70.92kb
dist/link/og-travel.png      -67%  249.83kb / tiny: 83.21kb
dist/link/og-leisure.png     -69%  195.24kb / tiny: 61.72kb
dist/link/og-default.png     -71%  235.38kb / tiny: 68.79kb

@nim-od nim-od self-assigned this Aug 21, 2024
@nim-od nim-od merged commit c60bac6 into main Aug 21, 2024
@nim-od nim-od deleted the perf-build branch August 21, 2024 18:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@nim-od nim-od

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@nim-od