webpack이란? 웹팩의 성능 최적화 방법?

오늘은 웹팩이뭔지에 대해 정리를 해보려한다.

 

웹팩을 알기전에 모듈이 뭔지 알아야하는데,

웹서비스는 여러가지 파일이 필요하다 (js, css, html,font,image....등)

이렇게 분리된 파일을 모듈이라하고 

하나의 파일, 컴포넌트를 a,b,c,d에서 공통으로 사용하는경우가있다. 

 

그렇게 많은 파일이 계속 만들어지면 

브라우저에서 서버로 요청이 증가하고

너무 많아질경우 네트워크 로딩이 길어지게된다. 그렇게되면 당연히

화면의 로딩시간이 지연되고 사용자경험에 좋을것이 없다.

 

그러면 개발편의를 위해 개발을하고, 페이지 로딩시간을 줄일 수 있는 방법이 없을까?

=> 브라우저에서 서버에 요청하는 http개수를 줄이는 것 

 

웹 서버에 배포하기전에 여러가지의 파일을 하나로 묶어서 배포하는 것 

(하나로 모듈을 묶는 작업 = 번들링)

여러개의 파일을 하나로 묶어주는 파일 = 모듈 번들러 

모듈 번들러의 종류 중 하나가 웹팩

즉, 웹팩은 배포하기전에 여러개의 파일을 하나로 묶어주는 "모듈 번들러"

번들링을 하지않으면 8개의 req와 305ms가 걸리는데,

번들링을 하게되면 3개의 req와 184ms가 걸린다. 

확실히 웹팩으로 번들링을 한 파일이 훨씬 시간이 적게걸린다. 

간단하기때문에 이정도지 프로젝트가 더 무거워진다면, 차이가 배로 날 것이다.

 

여기까지 모듈과 번들링, 웹팩에대한 개념이었다.

이부분에대해 개념을 잘 알고있나면 성능적인부분이나 사용자경험 개선에 좋은영향을 줄 수 있을것같다. 

 

웹팩의 최적화 

-> 번들사이즈 줄이기

 

번들사이즈가 커질수록 네트워크 속도가 느려진다.

번들사이즈를 줄이는 방법중 하나가 코드스플리팅이다.

코드스플리팅은 지금 당장 필요하지않은코드는 가져오지않는다.

 

SPA에서 코드스플리팅을 하려면, 

리액트에서는 컴포넌트를 동적으로 불러오고있기때문에 lazy를 사용해야한다.

lazy사용 조건은, suspense를 함께 사용해야한다는것이다.

suspense: fallback으로 로딩상태를 처리 

 

import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

-> React.lazy()를 사용해서 필요할때 LazyComponent를 느리게로드하고있다.

로딩중에 보이는 화면을 fallback으로 로딩UI화면 처리

 

- 동적으로 임포트해서 사용하는방법 

import React, { useState, useEffect } from 'react';

function App() {
  const [MyComponent, setMyComponent] = useState(null);

  useEffect(() => {
    import('./MyComponent').then(module => setMyComponent(module.default));
  }, []);

  return (
    <div>
      {MyComponent && <MyComponent />}
    </div>
  );
}

export default App;

-> 동적으로 가져온 컴포넌트 추적을 위해서 useState훅을 사용

 

optimization.splitChunks : 중복된 모듈을 처리하기위한 옵션 

 

유저에게 좋은 UX를 전달하기위해서는 앱에서 아직 정보가 로딩중이더라도

유저한테 티가 안나도록 우선순위를 두어 순서대로 로딩을 해야한다

이런 사용자경험을 개선하기위해서는 웹팩과, 코드스플리팅같은 부분을 활용한다면 충분히 개선이 가능할것이다. 

코드스플리팅은 페이지단위 뿐만아니라, 컴포넌트 단위로도 사용이 가능하다.

목적에 맞게 잘 사용하면된다.