Sua Blog
Module, Webpack, Babel
no date — react
모듈(module)이란?
모듈이란 여러 기능들에 관한 코드가 모여있는 하나의 파일 로 다음과 같은 것들을 위해 사용한다.
- 유지보수성 : 기능들이 모듈화가 잘 되어있다면, 의존성을 그만큼 줄일 수 있기 때문에 어떤 기능을 개선한다거나 수정할 때 훨씬 편하게 할 수 있다.
- 네임스페이스화: 자바스크립트에서 전역변수는 전역공간을 가지기 때문에 코드의 양이 많아질수록 겹치는 네임스페이스가 많아질 수 있다. 그러나 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 그 문제가 해결된다.
- 재사용성: 똑같은 코드를 반복하지 않고 모듈로 분리시켜서 필요할 때마다 사용할 수 있다.
Webpack
- 엔트리: 엔트리는 의존성 그래프의 시작점을 의미한다. 엔트리 파일을 의존하는 파일은 없고, 엔트리가 A를 의존하고, A가 다시 B, C를 의존하고.. 하는 식으로 모듈이 연결된다. 이때 웹팩은 이미지, 폰트, 스타일시트 역시 모듈로 관리한다. 설정파일에서 엔트리 파일을 지정할 수 있다.
- 아웃풋: 엔트리에 설정한 자바스크립트 파일을 시작으로, 의존되어 있는 모듈을 하나로 묶어서 내보낸다 (번들링). 번들된 결과물이 나오는 위치는 output 키에 기록한다.
- 로더: 웹팩은 기본적으로 자바스크립트와 JSON 만 빌드할 수 있다. 자바스크립트가 아닌 다른 자원 (HTML, CSS, Image)를 빌드할 수 있도록 도와주는 속성이다.
- 플러그인: 로더는 (번들되기 전) 파일단위를 처리하는 반면, 플러그인은 번들된 결과물을 추가로 처리한다. 번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용할 수 있다.
Babel
ES6+ 버전의 자바스크립트나 타입스크립트, JSX 등 다른 언어로 분류되는 언어들에 대해서도 모든 브라우저에서 동작할 수 있도록 호환성을 지켜준다. 바벨은 이렇게 추상화 수준을 유지한 채로 코드를 변화시키는 트랜스파일러의 역할을 한다. 바벨을 통해 ES6+의 자바스크립트 코드는 하위 버전으로 변환되고, 그로 인해 IE나 다른 브라우저에서 동작할 수 있게 만든다.
Webpack을 활용한 성능향상
- 캐시 사용
1-1. 캐시 기간 설정
# Server header
Cache-Control: max-age=31536000
1-2.파일의 이름을 바꿔서 강제로 다운로드 하게 하는것
<!-- Before the change -->
<script src="./index-v15.js"></script>
<!-- After the change -->
<script src="./index-v16.js"></script>
웹팩에서는 버전명을 사용하는 대신 파일 해시를 지정해서 사용할 수 있다
파일명에 해시를 포함하기 위해서는 [chunkhash]를 사용하면 된다.
// webpack.config.js
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.[chunkhash].js',
// → bundle.8e0d62a03.js
},
};
- 디펜던시
의존성 패키지들은 실제 앱의 코드보다 변화가 많지 않아 다른 파일로 분리하면 캐시하기 편하다
// webpack.config.js
module.exports = {
output: {
// Before
filename: 'bundle.[chunkhash].js',
// After
filename: '[name].[chunkhash].js',
},
// Before
entry: './index.js',
// After
entry: {
main: './index.js',
},
optimization: {
splitChunks: {
chunks: 'all',
},
},
};
- 레이지 로딩
더 중요한 요소를 먼저 다운로드 하고, 덜 중요한 것은 나중에 다운로드
// videoPlayer.js
export function renderVideoPlayer() { … }
// comments.js
export function renderComments() { … }
// index.js
import {renderVideoPlayer} from './videoPlayer';
renderVideoPlayer();
// …Custom event listener
onShowCommentsClick(() => {
import('./comments').then((comments) => {
comments.renderComments();
});
});
📔참고
https://baeharam.netlify.app/posts/javascript/module
https://juneyr.dev/2019-02-20/webpack-babel
https://berkbach.com/웹팩-webpack-과-바벨-babel-을-이용한-react-개발-환경-구성하기-fb87d0027766