코드 스플리팅과 dynamic import

yoon Y·2022년 8월 6일
0

코드 스플리팅

모든 웹 페이지의 속도를 결정 짓는 첫번째 요소는 첫 페이지를 그릴때 필요한 자원의 양이다.
필요한 자원이 많으면 많을 수록 네트워크 상에서 다운받는 시간이 오래 걸린다.

Webpack 같은 bundler 들은 모든 JS 코드를 하나의 거대한 파일로 만들어 내었고,
이는 웹페이지에서 페이지를 그릴때 필요한 자원의 양 또한 크게 증가 하게 되었다.
코드 스플리팅 기능을 사용해 필요한 코드만 분리, 필요 시에 로드해 이를 완화할 수 있다.

코드 스플리팅은 하나의 큰 번들을 여러개의 작은 번들들로 쪼개준다.
이를 잘 사용하면 필요할 때 필요한 번들만 로드 함으로써 초기 로딩시간을 줄여주고,
유저가 현재 필요하지 않은 코드는 로드 하지 않음으로써 앱의 성능도 크게 향상 시킬 수 있다.

두 가지 방법이 있고 목적에 따라 사용한다.

1. 파일 수동 분할

잘 바뀌지 않는 third-party 라이브러리를 하나의 번들로 따로 분리하고 처음에만 다운 받고 캐시해 놓으므로써 웹에 다시 접속했을 때 유저가 스크립트를 다시 다운받을 필요 없게 해준다.

const path = require("path");
module.exports = {
  mode: "development",
  entry: {
    index: "./src/index.js",
    another: "./src/another-module.js" // 여기
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  optimization: { // 중복되는 모듈 추출
    splitChunks: {
      chunks: "all"
    }
  }
};

2. dynamic import

일반적인 정적인 Module Import 를 필요한 시점 에 로드 할 수 있도록 도와준다.
Promise 를 반환 하며, export 하는 값들을 가진 객체를 반환한다.
Webpack에서 사용하려면 babel을 사용해야한다.

일반적인 경우
애초에 모듈이 나뉘어져 있고, 로드만 동적으로 하는 것
Preload, Prefetch가 필요한 경우 html에 직접 설정한다.

웹팩의 경우
import구문에 쓰인 모듈이 뭔지 파악 후 자동으로 별개의 파일로 분리해서 번들링하고
필요할 때 로드. (나머지 코드는 하나의 파일로 합쳐짐 첫 로드에+실행됨)
분리한 코드의 파일 이름을 설정할 수 있고 로드 시점을 지정할 수도 있다.

조건 달성 시 로드하기

module.exports = {
  output: {
    filename: '[name].js',
    chunkFilename: '[name].chunk.js',
  },
}

import((/* webpackChunkName: "test" */ 'module.js')
  .then((module) => {
    const { default: Component, a, b } = module;
  });
       

Preload
초기 렌더링에 반드시 필요한 리소스를 우선순위를 높여서 로드하므로써 렌더링 속도를 높일 수 있다.
파일 분리는 필요하지만 다른 파일의 코드와 의존되어 있어 병렬로 로드해야할 때 사용한다.

Prefetch
우선 순위를 뒤로 미루어 브라우저가 여유가 될 때 로드한다.

import(/* webpackPreload: true */ 'module.js');
import((/* webpackPrefetch: true */ 'module.js')
  .then((module) => {
    const { default: Component, a, b } = module;
  });

// 이렇게 변환됨       
<link rel="preload" as="script" href="module.js">
<link rel="prefetch" as="script" href="module.js">       

참고 자료
Webpack을 이용한 코드 스플리팅
dynamic-import-로웹페이지-성능-올리기
Browser 리소스 우선순위

profile
#프론트엔드

0개의 댓글