프론트엔드 프로젝트 용량이 너무 크다고요? (Rollup plugin visualize, Light house 등)

데브옵스 팀으로부터 한 레포지토리의 도커 이미지 용량이 너무 크다는 이야기를 들었다.

 

Rollup plugin visualizer

빌드 후 어느 부분에서 많은 용량을 차지하는지 보려고 rollup plugin visualizer 라이브러리를 사용했다. 봤다. vite를 사용하고 있어서 webpack 관련된 라이브러리 말고, rollup plugin visualizer를 사용했다 ! 

1. 일단 라이브러리를 설치한다.

yarn add --dev rollup-plugin-visualizer

2. vite.config.ts에다가 아래 코드를 작성한다. (typescript 사용 중인 경우/ https://www.npmjs.com/package/rollup-plugin-visualizer 참고!)

const { visualizer } = require("rollup-plugin-visualizer");

module.exports = {
  plugins: [visualizer()],
};

3. 빌드한다. 

yarn build

4. stats.html 파일이 하나 생기는데 열어보면 이런 식으로 나온다!

=> lodash가 용량을 많이 차지하고 있어서, lodash 를 다 import하지 말고 사용하는 것만 import해야겠다!! 

=> (2022.10.19)

default import로 변경하니 용량이 많이 줄었다!! 

 

 

Docker image alpine

그리고!!!! 다른 분이 알아내셔서 적용하신 건데, 도커 이미지를 alpine 이라는 걸로 빌드하니까 용량이 1/5 정도가 됐다고 한다! 보통 용량을 작게 하기 위해서 사용하는 이미지라고 한다. 대박 사건~~~!!

 

 

Light house

크롬 개발자 도구/light house로도 분석해봤다 ㅎㅎ

1. 크롬 개발자 도구를 연다 -> Lighthouse 클릭

2. Analyze page load 클릭

그러면 아래 예시처럼 성능, 접근성, SEO 등에서 부족한 부분을 알려준다~ (음.. 용량..과 큰 관련은 없어도 조금이나마 관련있지 않을까 해서 봤다.)

'w-48 h-inline-block' 부분은 tailwindcss 코드인데, h-inline-block은 제대로 되지 않은 코드이다. 'h-4' 이런 식으로 높이도 지정하려고 하다가 오타가 난 것 같다ㅠ