search

AllRightJunyoung / blog-project

Next.js를 사용하여 개인블로그 만들기
https://www.physicaljun.blog/
2 stars 0 forks source link

PostDetail 페이지 번들 사이즈 개선하기 #16

Closed AllRightJunyoung closed 1 year ago

AllRightJunyoung commented 1 year ago

빌드 할때

posts/[slug] 페이지의 번들사이즈가 매우 높게 나왔다.

원인이 무엇인지 보고 해결할 방법을 찾아보자

AllRightJunyoung commented 1 year ago

React-Markdown을 사용하는 컴포넌트인 Markdown 컴포넌트를 Dynamic import를 하여 423kb에서 200kb로 줄임

AllRightJunyoung commented 1 year ago

CharkaProvider를 dynamic import 하여 번들 사이즈를 개선하였음 50kb 감소

https://dev.to/zeyadetman/reduce-bundle-size-with-chakra-ui-and-nextjs-2agl

AllRightJunyoung commented 1 year ago

React-Markdown을 사용하는 컴포넌트인 Markdown 컴포넌트는 Toc컴포넌트와 의존적이다.

Markdown 컴포넌트가 먼저 렌더링이되어야 Toc 컴포넌트에서 에러가 발생하지않는다.

하지만 dynamic import를 사용하여 번들사이즈를 줄이면 423kb에서 200kb으로 절반가까이 줄여지나 Toc 컴포넌트가 Markdown컴포넌트보다 먼저 렌더링 하려는 이슈로 인해 페이지가 정상적으로 보이지 않는다.

dynamic import로 React-Markdown의 번들 사이즈를 개선해도 블로그를 보는 사용자 입장에서 페이지에 들어가는데 지장이 없어 지우게 되었다.