[NextJS] Terser를 활용한 성능 최적화(feat. sharp)

최종 프로젝트의 모든 기능 구현을 마무리 하고 마지막으로 성능 최적화를 진행하기 위해 lighthouse로 페이지들의 성능을 측정해보았다.

여러 페이지에서 공통적으로 자바스크립트 줄이기, 사용하지 않는 자바스크립트 줄이기 라는 메세지가 발견되었다. 따라서 이를 해결하기 위해 Terser를 사용한 Javascript 압축 최적화를 적용하였으며, 추가적으로 sharp을 활용한 이미지 최적화도 진행하였다.

Terser

Terser는 Javascript 코드를 압축하고 난독화하여 크기를 줄이고 성능을 최적화하는 도구이다.
Next.js는 기본적으로 SWC를 사용하여 JS를 압축하지만, terser-webpack-plugin을 추가적으로 적용하면 압출률을 더 높일 수 있다.

우선 최적화 전의 현재 번들 파일의 크기는 343.7MB 다.

다음으로는 terser-webpack-plugin을 설치해준다.

yarn add terser-webpack-plugin --dev

그리고 next.config.mjs 파일에 다음과 같이 작성해준다.

import TerserPlugin from "terser-webpack-plugin";

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  webpack: (config) => {
    config.optimization.minimizer.push(
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // console.log 제거
            passes: 3, // 압축 최적화를 3번 반복 (압축률 증가)
          },
          mangle: true, // 변수 및 함수명을 난독화하여 크기 감소
          format: {
            comments: false, // 모든 주석 제거 (파일 크기 줄이기)
          },
        },
        extractComments: false, // 주석을 별도 파일로 분리 X (파일 크기 줄이기)
        parallel: true, // 병렬 실행 활성화 (빌드 속도 최적화)
      }),
    );
    return config;
};

export default nextConfig;

위 설정을 적용하면 불필요한 코드(console.log) 제거, 파일 크기 감소, 난독화를 통한 보안 강화 등의 효과를 기대할 수 있을 것이다.

참고: https://terser.org/docs/options/?utm_source=chatgpt.com

최적화 후 번들 크기는 251.3MB로 30% 정도 크기가 감소한 것을 확인할 수 있다!

lighthouse도 다시 돌려보니,

성능이 아주 크게 향상되었다!!!!! 유의미한 최적화였던 거 같다.

sharp

그리고 성능 테스트를 하며 여러번 배포를 진행했는데 배포 때마다 다음과 같은 경고메세지가 반복적으로 출력되었다.

 ⚠ For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'npm i sharp', and Next.js will use it automatically for Image Optimization.
Read more: https://nextjs.org/docs/messages/sharp-missing-in-production

이를 찾아보니, Next.js는 이미지 최적화를 위해 sharp(빠름)과 squoosh(느림) 중 한 개를 사용하는데 sharp이 없는 경우 기본적으로 squoosh를 사용하기에 sharp 설치를 권장하는 메세지였다.

참고: https://nextjs.org/docs/messages/sharp-missing-in-production?utm_source=chatgpt.com

따라서 다음 명령어를 사용해 sharp을 설치하고