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 (14) | 2017.01.18 |
|---|---|
| SPA 단점에 대한 단상 (9) | 2017.01.17 |
| [Webpack] 자바스크립 모듈 번들러, 웹팩(Webpack) (8) | 2017.01.12 |
| [Angular2] Angular2 선택을 위한 명분 (8) | 2016.12.19 |
| [Node.js] Node With IIS (25) | 2016.07.19 |
