[Next.js] 무작정 성능 최적화 하기 (1)

예전부터 라이트 하우스 점수가 마음에 들지 않아서 무작정 개선해보기로 했다.

사용하지 않는 package 제거

이 부분이 라이트하우스 점수에 영향을 끼치는지는 모르겠으나, 아무래도 여러 사람이 함께 한 프로젝트다보니 필요없는 package까지 설치된 경우가 있어 한번 정리하기로 했다.
https://www.npmjs.com/package/depcheck
npm i -g depcheck로 설치해서
터미널에 depcheck 를 입력해주면 된다.

Unused dependencies
* @mui/lab
* @next/eslint-plugin-next
* @types/gtag.js
* @types/web-app-manifest
* @uiw/react-md-editor
* babel-plugin-macros
* bufferutil
* cookies-next
* cropper
...

이런 식으로 알려주는데, 모두 다 없애버리니까 문제가 생겨서, 정말 안 쓴다 싶은 것들만 삭제했다.

좀 더 가벼워진 node modules 폴더!

번들 사이즈 줄이기

bundle-analyzer

bundle-analyzer를 사용하여 번들 사이즈를 확인해보기로 했다.
설치는 문서에 잘 정리되어있다.
https://nextjs.org/docs/app/building-your-application/optimizing/bundle-analyzer

next config 설정 후 npm run build를 해주면 .next 폴더 안에 analyze 폴더가 생기고 bundle-analyzer 관련 파일이 생긴다.

그러다가 엄청 큰 파일 발견. 얘가 대체 뭐하는 파일인고 하니... 그냥 단순 이미지 파일이었는데 코드 줄수가 엄청 길었다. 지금 보니까 앞으로 안 쓰일 파일로 보여서 삭제했다.

dynamic import

https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic

const DynamicTutorial = dynamic(() => import('@/components/Tutorial'), {
  loading: () => <></>,
})

Route (app)                              Size     First Load JS
┌ λ /                                    49.3 kB         296 kB
├ ○ /_not-found                          0 B                0 B
├ λ /[...Not_found]                      386 B          84.2 kB
├ ○ /about                               851 B           249 kB
├ ○ /about/announce                      7.49 kB         152 kB
├ λ /about/announce/[id]                 7.75 kB         149 kB
├ ○ /about/contact                       4.85 kB         179 kB
├ ○ /about/dictionary                    5.44 kB         126 kB
├ ○ /about/mind                          851 B           249 kB
├ ○ /about/personal                      8.79 kB         117 kB
├ ○ /about/service                       851 B           249 kB
├ ○ /admin                               63.7 kB         282 kB
├ ○ /find-account                        9.84 kB         203 kB
├ ○ /hitchhiking                         9.56 kB         264 kB
├ ○ /login                               5.34 kB         196 kB
...
+ First Load JS shared by all            83.8 kB
  ├ chunks/9184-6c11547d2c81ee17.js      29.9 kB
  ├ chunks/fd9d1056-7d0d2955ae5e94c0.js  51.1 kB
  ├ chunks/main-app-3cbec70d20fb4100.js  242 B
  └ chunks/webpack-af59580936ad556e.js   2.58 kB

Route (app)                              Size     First Load JS
┌ λ /                                    31.1 kB         259 kB
├ ○ /_not-found                          0 B                0 B
├ λ /[...Not_found]                      386 B          84.4 kB
├ ○ /about                               851 B           249 kB
├ ○ /about/announce                      7.49 kB         153 kB
├ λ /about/announce/[id]                 7.75 kB         150 kB
├ ○ /about/contact                       4.86 kB         179 kB
├ ○ /about/dictionary                    5.44 kB         127 kB
├ ○ /about/mind                          851 B           249 kB
├ ○ /about/personal                      8.79 kB         117 kB
├ ○ /about/service                       851 B           249 kB
├ ○ /admin                               44.2 kB         286 kB
├ ○ /find-account                        9.84 kB         203 kB
├ ○ /hitchhiking                         7.96 kB         264 kB
├ ○ /login                               5.34 kB         197 kB
...
+ First Load JS shared by all            84 kB
  ├ chunks/9184-6c11547d2c81ee17.js      29.9 kB
  ├ chunks/fd9d1056-7d0d2955ae5e94c0.js  51.1 kB
  ├ chunks/main-app-3cbec70d20fb4100.js  242 B
  └ chunks/webpack-c293d3cb1db748b6.js   2.78 kB

optimizePackageImports?

최적화 하는 방법을 찾다가 optimizePackageImports라는 걸 알게 되어서 적용을 했지만, 이미 큰 번들사이즈를 차지하고 있는 mui는 이미 default로 설정되어있어서 변화가 딱히 없어보였다.
https://medium.com/@under_the_hook/next-js-modularize-imports-687d7a2cddcf
https://nextjs.org/docs/app/api-reference/next-config-js/optimizePackageImports

작지만 점수가 71에서 76으로 조금 개선되었다.

앞으로 할 것

LCP 개선, total blocking time 개선하기