[Webpack] 비동기 번들 로딩

Posted in 모바일/Javascript // Posted at 2017.01.14 12:09

Webpack을 사용한 비동기 번들 로딩.

관심사의 분리/분할과 정복 등의 기본 원리를 바탕으로 잘 나눠진 모듈로 분리된 자바스크립트 파일을 만들고..

배포할때는 웹팩으로 단 하나의 번들 파일로 배포해서 사용하는 좋은 시나리오에서...

어떤 경우에는 이런 방식이 부담되기도 하는데, 예를 들어 (필요는 하지만) 굳이 미리 다운로드 받지 않아도 되는 즉 필요할 때만 다운로드 받게 하고 싶은 경우가 있다.

이때 사용할 수 있는 것이 비동기 번들 로딩

내부적으로 번들파일이 나눠지고 해당 스크립트를 사용하게 되면 그때 관련된 번들파일이 다운로드 되게해서 초기 로딩 속도를 향상시키고 사용자의 행동에 따라 추가 스크립트를 제공해 주는 Lazy Loading 기법이라 할 수 있다.

* 비동기 번들 로딩 구현

1) 먼저 필요한 것들 설치
- webpack 환경(npm, webpack, babel-load, babel-core 등등 필요한 것)


2) webpack 설정파일(옵션)

module.exports = {

  entry: './src/index.js',

  output: {

    path: './public',

    filename: 'bundle.js'

  },

  module: {

    loaders: [

      {

        test: /\.jsx?$/,

        exclude: /(node_modules|bower_components)/,

        loader: 'babel-loader',

        query: {

          presets: ['es2015']

        }

      }

    ]

  }

};

3) 스크리트 작성 및 html 작성

//index.js
document.querySelector('button')  

  .addEventListener('click', () => {

    require.ensure([], function (ev) {

      var asyncModule = require('./asyncModule'); //비동기 로딩 스크립트가 다운로드 되는 시점

      asyncModule.showModal();

    });

}, false);


//asyncModule.js (비동기 로딩 대상 스크립트)

module.exports = {  

  showModal: () => {

    alert('load asyncModule.js');

  }

}

//index.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

</head>

<body>

    <h1> AsyncModle Loding Demo </h1>

    <button>async load</button>

    <script src="/public/bundle.js"></script>

</body>

</html>

4) 빌드
웹펙으로 빌드하면 다음과 같이 두 개의 번들 파일이 생성됨


브라우저에서 실행을 해 보면, 처음에는 index.html과 bundle.js 파일만 다운로드 받고, 버튼을 클릭하면 그때 1.bundle.js 파일을 다운받게 된다

처음 로딩 시


버튼 클릭 후

이제 중요한 것은 모듈을 어떻게 나누고, 비동기 로딩의 대상과 시점을 어떻게 하느냐.. 하는 전략.

샘플 수행의 거의 모든 소스는 다음 사이트를 참조함
(내 환경에서 버그가 나서 아주 미미한 수정을 가했으며 문구도 내 입맛에 맞게 맘대로 바꿈 ^^;)
=> http://jilles.me/webpack-async-bundle-loading/


저작자 표시 비영리 변경 금지
신고
Tags