Refactor/#650: 웹팩 최적화 검토

[semnil5202]

작업 대상

• webpack config js를 대상으로 진행합니다.
• Tree Shaking 적용 되어 있는 것 확인 했습니다. Babel config js module 옵션 확인 및 Webpack 버전 확인
• minify(개행, 세미콜론 제거 등 간소화), ugly(난독화)는 Webpack 5 버전 이상에는 Terser 내장으로 일괄 적용됩니다.

📄 작업 내용

• gzip 적용하기
• Tree Shaking 검토

스크린샷

이전 최적화 작업 결과

gzip 적용 시

아래 플러그인 및 옵션 추가하였습니다. 원래 CloudFront 에서 gzip 수행했던 걸로 기억하는데, CloudFront 못 쓰면서.. 웹팩 단에서 gzip 압축해서 서버로 서빙해야할 것 같습니다~

const CompressionPlugin = require('compression-webpack-plugin');

plugins: [
    // ...
    new CompressionPlugin({
      filename: '[path][base].gz',
      algorithm: 'gzip',
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0.8,
    }),
]

📎 관련 이슈

close #650

성능 최적화 (4기 위니 글)

[jiwonh423]

덕분에 웹팩 설정 배워갑니다 👍

[jiwonh423]

확인하고 바로 false하는 꼼꼼함 멋지네요ㅋㅋㅋㅋㅋㅋ

[semnil5202]

ㅋㅋㅋㅋㅋ run dev 할때마다 창 두 개 뜨는게 조큼 별로라..

[GC-Park]

👍👍👍

[jiwonh423]

클라우드프론트하는것보다 훨씬 간단하네여
핑프라 그런데 뭐가 더 성능이 좋은건가요?

[semnil5202]

성능적인 부분까지는 파악하지 못했네요. 아마 압축 알고리즘이 gzip으로 동일해서 성능은 동일하지 않나.. 추측해봅니다.

이 글에 의하면 클라운드 프론트에서는 압축 실행, 해제 이정도 단위로 수행할 수 있는 것 같은데 웹팩에서는 조금 더 상세한 설정이 가능했습니다.

threshold : 설정한 크기 보다 큰 것만 압축 수행
minratio: 압축 결과가 원본의 0.8 이하의 비율로 압축된 것만 압축 수행

[GC-Park]

cloudFront를 못 써서 gzip이 안된다는걸 간과했는데 세인이 잘 짚어주신 것 같습니다!!

그런데 혹시 아이크가 말한 '핑프' << 는 무엇일까요?!!! 줄임말에 넘나 약해서... ㅎㅎㅎㅎ

[semnil5202]

ㅋㅋㅋㅋㅋㅋㅋㅋ핑프란 핑거프린세스로 직역하면 공주님 손가락인데 보통 의미는 무언가를 찾지 않고 남에게만 물어보는 (귀찮아서) 그런 사람을 지칭하는 말입니다.

근데 원래 리뷰라는게 남이 아는걸 질문해서 빠르게 알아가는 장점도 있는거져~

[GC-Park]

생각하지 못한 부분을 짚어주셔서 너무 좋네요 세인 !!

gzip을 cloudFront말고 직접 설정할 수 있는 방법을 알 수 있었습니다!! 땡큐 쏘 머치 !!(참고 자료도 감사해용!)

바로 approve 할게요!!

[GC-Park]

오호 이 라이브러리를 이용해 gzip을 적용할 수 있군요!! 👍

[GC-Park]

msw끼리 모아둔 꼼꼼함 😆

[semnil5202]

옷~ 이건 의도하지 않았는데 npm i 하면서 자동 정렬된거 같군영~

[GC-Park]

👍👍👍

[GC-Park]

cloudFront를 못 써서 gzip이 안된다는걸 간과했는데 세인이 잘 짚어주신 것 같습니다!!

그런데 혹시 아이크가 말한 '핑프' << 는 무엇일까요?!!! 줄임말에 넘나 약해서... ㅎㅎㅎㅎ