[Webpack] 비동기 번들 로딩

Posted in 모바일/Javascript // Posted at 2017. 1. 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/


'모바일 > Javascript' 카테고리의 다른 글

[Angular] Lazy Loading  (0) 2017.01.18
SPA 단점에 대한 단상  (1) 2017.01.17
[Webpack] 자바스크립 모듈 번들러, 웹팩(Webpack)  (0) 2017.01.12
[Angular2] Angular2 선택을 위한 명분  (0) 2016.12.19
[Node.js] Node With IIS  (1) 2016.07.19
Tags webpack

submit

Webpack 제공 기능 정리.

자바스크립트 개발과 관리...

대규모 복잡한 자바스크립트 개발 환경에서는 무지 편해지고 추가 이득이 수루룩... 

But, 소규모 단순한 자바스크립트 개발에서는 괜한 복잡성 증가...

삽으로 파야할 땅인지 포크레인으로 파야할 땅인지 부터 보고 결정.

요즘 대부분 포크레인이 요구되기는 함.




'모바일 > Javascript' 카테고리의 다른 글

SPA 단점에 대한 단상  (1) 2017.01.17
[Webpack] 비동기 번들 로딩  (0) 2017.01.14
[Angular2] Angular2 선택을 위한 명분  (0) 2016.12.19
[Node.js] Node With IIS  (1) 2016.07.19
[AngularJS] 폼(form)과 유효성 검사  (0) 2016.07.18
Tags webpack

submit