inflearn logo
강의

Course

Instructor

Real-world web performance optimization for frontend developers (feat. React) - Part. 1

1-10) Apply text compression

텍스트 압축 방식에 대해 질문이 있습니다

950

jjongrrr

26 asked

2

안녕하세요 

강의 정말 좋네요 감사합니다 

초보자라 헷갈려서 질문 몇개 드립니다 

 

질문1 

웹팩 플로그인(MiniCssExtractPlugin, TerserPlugin 같은..)을 이용하거나 다른 압축프로그램을 이용하여 공백없앰, 주석삭제, 난독화, 파일 합침, 파일 나눔 등 압축하는 방식과 

강의에서 나온 서버쪽에서 압축하는 방식이 다른걸까요 ?

 

질문2 

1번 질문에서 두가지 압축이 다른거라면 

첫번째 방식은 압축을 해제하지 않고 읽고 

두번쨰 방식은 gzip같이 압축되어있는걸 압축을 해제하는게 맞는거겠죠 ? 

 

질문3

1번 질문에서 두가지 압축 방식이 다른거라면 둘 다 적용하면 성능이 더 개선이 될까요 ? 아니면 한개만 적용하는게 개선이 될까요 ? 

 

질문4

저희 회사에 텍스트압축 방식을 건의 드렸더니 백엔드분이 서버에서 압축하는 방식은 용량이 낮아져 다운로드는 빨라도 압축을 푸는데 오래걸려서 비효율적이었다 라고 하시는데 ....

압축을 해제하는 속도를 어디서 확인해볼 수 있을까요 ..? 

 

react devtools

Answer 1

2

hackurity01

안녕하세요, jjongrrr님

하나씩 차례로 답변드리겠습니다.

1. 

우선, Compress(압축)과 Minify(경량화?)를 구부하셔야 합니다. 둘은 다릅니다. 
말씀해주신 플러그인은 Minify 플러그인입니다.
조금 더 세분화해서 예를 들어보면,

  • Minify: 실제 코드 실행에 불필요한 공백, 주석 등을 제거하는 작업
    • let test1 = 123;
      const test2 = 234; 

      --->    let test=123;const b=234;
    • 공백과 개행을 모두 제거했지만 코드 실행에는 아무 문제 없습니다.
  • Uglify(난독화): 코드의 변수명이나 함수명등을 알아보기 힘들게 바꾸는 작업
    • let veryImportantValue = 123;

      ---> let a = 123;
    • 보안성 강화 + 긴 변수명 또는 함수명을 짦게 바꿔줘서 최적화 효과도 있음
  • Compress: 네트워크 전송 시, 텍스트 데이터 자체를 압축하는 작업
    • 쉽게 생각해서 zip으로 압축하듯이 압축한다고 생각하시면 됩니다.
    • 일반적인 텍스트 파일(html, js, css 등)들은 압축을 통해 사이즈를 줄일 수 있습니다.
    • 웹에서 사용하는 압축방식은 gzip입니다.
    • 텍스트의 패턴에 따라 많게는 1/10, 적게는 1/5까지 사이즈가 줄어듭니다.

이렇게 정리할 수 있습니다.
Minify와 Uglify는 Build 타임에 적용이 되며, Compress는 네트워크 상에서 전송할 때 압축이 진행됩니다.
따라서 어떤게 좋다 나쁘다라고 할 수 없고 다른 작업들입니다. 모두 적용하는게 일반적으로는 효율적입니다.

2.

네, 맞습니다.
위에 정리해뒀듯, Minify와 Uglify는 코드 실행에 전혀 영향을 주지 않습니다. 단지 사람이 보기 힘들어 졌을 뿐입니다.

3.

1번에서 언급했듯 일반적으로 모두 적용하는 것이 효율적입니다.

4. 

음... 이건 그 분이 잘못 알고 계신겁니다.
텍스트 압축(gzip) 시간은 서비스 시간에 거의 영향을 주지 않습니다.

강의에서도 언급했던거 같은데요, 대략 2KB를 기준으로 그 이하 사이즈인 파일은 압축은 안하는 것이 더 낫습니다. 반대로 그 이상의 사이즈 파일은 압축을 하는 것이 좋다는 것이되는 거죠.
(보통 이 분기는 압축을 적용하는 곳에서 해줍니다.)

그런데 서비스 코드 중에 2KB를 안 넘는 것이 과연 얼마나 될까요?
거의 없죠.. 즉, 웬만하면 압축을 하는게 좋다는 겁니다.

이 gzip을 적용하는 작업은 작업 리소스 대비 효율이 굉장히 좋습니다.
꼭 하시길 바랍니다. 코드가 500KB라면 압축 후, 거의 100~50KB가 될겁니다.

 

답변이 도움되셨길 바라며, 강의에 관심을 가져주셔서 감사합니다. :)

0

jjongrrr

상세하고 친절한 답변 감사합니다 ! 

정말 많은 도움이 되었네요 

2탄도 학습할게요 ~!

bundle analyzer 에 대한 질문이 있습니다.

0

108

2

Cannot find module serve 에러

1

103

1

성능 탭에서 소요시간이 안보입니다

0

204

2

이미지 CDN 만드는 방법

0

459

1

Performance FPS 탭이 안보여요.

1

796

1

CPU throttling이 뭔가요?

0

1118

1

default export가 아닌 named export일 때 lazy사용법

1

1069

1

lazy적용하였는데 네트워크탭에 분리하여 보이지 않습니다

1

582

1

network 캐싱에 대해서 질문 있습니다!

1

426

1

vue project에서 chrome performance tab 확인하기

1

457

1

node version으로 인한 오류

4

1231

1

강의 자막

1

954

2

번들파일과 병목현상 질문

2

396

1

webpack-bundle-analyzer 질문

1

786

1

이미지 프리로딩 질문

1

385

1

이미지 최적화 활용

1

581

1

강력 새로고침

1

323

1

Suspense 관련해서 질문드립니다

2

360

1

config-overrides cant resolve path

1

362

1

이미지 preload 컴포넌트 preload 차이 질문드립니다.

1

611

1

custom react 환경에서 node_modules chunk 분리

1

380

1

removeSpeical 함수를 줄여야겠다고 하는 이유!

1

281

1

Factory pattern에 대해서 궁금한 점이 있습니다

2

364

2

최적화에 대해서 질문있습니다~~

1

341

1