[Next JS - 7버전] css 최적화

next-purgecss를 통해서 css를 최적화 합니다.

공식홈페이지

현재 진행하는 프로젝트에서는 버전 7.0.2를 사용중이기에

Next.js 플러그인(Next.js < 9.3)이 부분을 참고하여 진행합니다.

npm install @zeit/next-css next-purgecss --save-dev
라이브러리를 먼저 설치해주시고 패키지를 설치한 후에는 next.config.js에 아래 코드를 붙여넣어줍니다.

const withCss = require("@zeit/next-css");
const withPurgeCss = require("next-purgecss");

module.exports = withCss(withPurgeCss());

이후 아래를 통해서 css가 최적화가 되었는지 확인할수있습니다.

크롬 > 개발자도구 > shift + command + p > coverage 또는 범위 계측 > 실행