[코드분할] 동적import와 웹팩사용

Create-react-app으로 프로젝트를 만들어 환경설정을 하는 중,
ie 지원을 위한 polyfill을 불러오는데, 모듈이 필요한 브라우저에서만 선택적으로
불러오면 좋지 않을까하여 고민했던 방법을 정리합니다.

1. 필요한 모듈만 동적으로 import 하기(dynamic import)

• 필요한 경우에만 모듈을 import하는 것이 효율적입니다. chrome에서는 ie11 폴리필 모듈을 불러올 필요가 없기 때문에, 브라우저를 체크하여 동적으로 모듈을 import 할 수 있습니다.
• dynamic import를 사용하게 되면 번들 파일의 코드를 분할하여, 모든 코드를 한번에 불러오지 않고, 사용자가 필요로 할 때 필요한 코드만 불러오게 됩니다. 즉, 코드분할로 번들파일 크기를 줄일 수 있습니다.
• React - 코드분할 컴포넌트 렌더링에는 React.lazy를 사용합니다.
• 브라우저 확인법
  • IE 브라우저에서만 document.documentMode를 지원합니다.
    MS - document mode
  • Edge 는 지원하지 않으므로 Edge 브라우저만 감지해야 한다면 var isMsEdge = window.navigator.userAgent.indexOf('Edge/') > -1를 사용합니다.
    JavaScript: The best way to detect IE
  • stable 모듈의 경우 ie와 구형 브라우저에서 지원하지 않는 Array.prototype.find 메서드가 존재하는 지 여부를 기준으로 import 합니다.

if (document.documentMode) {
  import(
    /* webpackChunkName: "polyfill-ie" */
    'react-app-polyfill/ie11'
  );
}

if (!Array.prototype.find) {
  import(
    /* webpackChunkName: "polyfill-stable" */
    'react-app-polyfill/stable'
  );
}

polyfill 모듈을 동적import 방식으로 사용했을 때 문제점

• 위의 코드를 작성한 후, index.js 파일에서 아래와 같이 import 했을 때, ie에서 제대로 작동하지 않았습니다.

import './setupPolyfill';

// 기존 방식, 코드 분할 없이 모든 브라우저에서 모듈을 불러온다.
// import 'react-app-polyfill/ie11';
// import 'react-app-polyfill/stable';

• setupPolyfill 파일안의 동적 import 구문을 사용하기 위해서는, polyfill이 우선적으로 필요하기 때문에 작동하지 않는 것으로 생각했고, polyfill 모듈을 코드분할 하고 싶을 경우에는 동적 import방식 대신에 다른 방법이 필요했습니다.

2. 웹팩, html-webpack-plugin 으로 코드분할하기

• 웹팩의 진입점을 index와 setupPolyfill 두가지로 나누고, 브라우저를 체크하여 필요한 경우에 polyfill 모듈을 html에 추가해주는 방법이 있습니다.
• CRA를 사용했다면, eject하거나 craco 를 사용하여 웹팩 config를 추가할 수 있습니다.
• html에 추가할 때에는 html-webpack-plugin 을 사용해야 하는데 자세한 사항은 html-webpack-plugin github 을 살펴볼 예정입니다.

// webpack.config.js
module.exports = {
    entry: {
        main: './src/index.js',
        polyfill: './src/setupPolyfill.js'
    }
}