전체41 Next.js 페이지 성능 개선하기 성능 개선하기 성능을 개선하기 위해 내가 한 것들은 다음과 같다. 성능 개선 관련 내용들은 파트별로 포스트를 업로드할 예정이다 사용하지 않는 코드들 정리하기 next/dynamic 적용하기 next/image Image 태그들 중 페이지 렌더링 시 처음 보여져야할 이미지에 priority 설정하기 svg spirtes 적용하기 등등 아래 포스트들을 통해 더 자세하게 확인할 수 있다. Next.js 사이트 성능 관리 - next/dynamic 적용하기 Next.js 사이트 성능 관리 - next/dynamic 사용하기 사이트 내 js, css 등의 파일 로드 시간을 단축하기 위해 next/dynamic을 적용하고자 한다. 기존에 모듈, 컴포넌트들을 import하는 방식은 다음과 같았다. 기존 import .. 2024. 3. 22. Next.js 번들 사이즈 확인하기 - @next/bundle-analyzer 사용하기 @next/bundle-analyzer를 이용하여 번들 사이즈를 확인해보자! 설치 npm i @next/bundle-analyzer --save-dev 우선 @next/bundle-anlyzer를 설치해 보자. 개발할 때만 필요한 패키지이므로 뒤에 --save-dev를 붙여서 설치해 주자. next.config.js 설정하기 const withBundleAnalyzer = require("@next/bundle-analyzer")({ enabled: process.env.ANALYZE === "true", }); ... const nextConfig = { reactStrictMode: true, ... ... }; module.exports = withBundleAnalyzer(nextConfig); .. 2024. 3. 22. Next.js 페이지 성능 개선 - svg sprites 적용하기 기존에 내가 svg를 프로젝트 내에서 관리하던 방식은 다음과 같다. 우선 프로젝트 내에서 나는 styled-components를 이용하여 스타일링을 적용하고 있었다. 각각 페이지나 큰 규모의 컴포넌트에 해당하는 스타일링 파일을 생성하고 모두 프로젝트 루트 밑에 styles/components 폴더 내에 페이지 이름.js 라는 파일을 생성하여 관리했다. styles/componets |_ home.js |_ search.js |_ user.js 각각 스타일링 파일의 하단에 svg를 다음과 같이 정의해두었다. svg별로 이름을 지어주고 export하여 필요한 컴포넌트에서 import하는 방식을 사용 중이었다. 그중 path 길이가 엄청 긴 svg들도 있었다. 스타일링 파일을 불러올 때마다 그 파일 내에 정의.. 2024. 3. 22. Next.js 사이트 성능 관리 - next/dynamic 사용하기 사이트 내 js, css 등의 파일 로드 시간을 단축하기 위해 next/dynamic을 적용하고자 한다. 기존에 모듈, 컴포넌트들을 import하는 방식은 다음과 같았다. 기존 import Modal from "@/components/common/modal"; next/dynamic 적용 후 import dynamic from "next/dynamic"; const Modal = dynamic(() => import("@/components/common/modal"), { loading: () => Loading..., }); const Form = dynamic(() => import("@/components/home/form"), { loading: () => Loading..., }); const .. 2024. 3. 22. 이전 1 2 3 4 ··· 11 다음
