lighthouse 개선(4) best practices

best practices란?

웹사이트가 웹에 대한 표준 모범 사례를 따르고 있는지를 확인하는 지표이다.

콘솔의 오류 출력, 사용하지 않는 API 출력, HTTPS를 통합 페이지 접근 가능 여부는 best practices 수치에 영향을 준다.

octodocs에서 best practices 개선 사항으로는 ‘브라우저 콘솔’이 있었다.

배포환경에서도 네트워크 에러 등의 콘솔에 찍히고 있었고, 콘솔 로그가 많아지면 메모리 사용량이 증가하고 성능 저하의 원인이 될 수 있다.

구체적으로는 유저 프로필을 부르는 api 호출 시, 로그인이 되어 있지 않으면 403을 반환한다. 이 에러가 첫 렌더링부터 콘솔에 찍히고 있었다.
403은 ‘비로그인 상태’를 알 수 있는 지표이기 때문에 우리는 이것을 에러라기보다는 상태로 인식했다.

배포환경에서 에러 콘솔 출력을 막는 플러그인이 있었고, 이를 적용하기로 했다.

babel 생태계의 플러그인으로, 코드 변환 단계에서 작동한다.

JavaScript/TypeScript 코드의 AST를 분석하여 console 관련 구문을 제거한다.

.babelrc 를 통해 설정하며, production 모드에서만 동작되게 했다.

하지만 실제로 배포 환경에서 콘솔은 제거되지 않았는데, 그 이유는 이 플러그인은 소스 코드에 작성된 console 구문만 제거한다. 즉, 런타임에 발생하는 네트워크 에러로 인한 콘솔 에러는 제거하지 않는다.

vite 빌드 도구를 위한 전용 플러그인이다.

esbuild 기반으로 동작하며, 빌드 과정에서 console 문을 제거한다.

vite.config.ts 파일에 플러그인을 추가한다.

export default defineConfig({
  plugins: [
		// ...
    removeConsole(),
  ],
  // ...
})

💡lighthouse 개선