티스토리 뷰
안녕하세요!
이번에는 TypeScript Proejct를 배포를 위한 준비를 해보겠습니다!
먼저 간단하게 webpack-bundle-analyzer(웹팩 번들 에널라이저)에 대해 알아보겠습니다!
Webpack을 사용하여 번들링되는 모듈을 분석해서 시각적으로 표현해주는 모듈입니다.
모듈이 차지하는 용량에 따라서 눈에 보이는 영역도 커지기 때문에 어떤 모듈이 얼만큼 용량을 차지하는지 쉡게 파악할 수 있습니다
밑에 그림 처럼요 !
Webpack 특성상 수십개들의 파일들을 단 하나의 js 파일로 압축해주는 역할을 맡고 있습니다.
이럴 때 용량 문제가 큰 이슈 사항인데요.
합쳤을 때 용량이 너무 크면 문제가 되겠죠?
지금은 app.js는무려 총 크기가 1.5MB를 차지하고 있습니다.
(사실상 한국은 별 문제 없는데 지하,다른 나라들을 고려한다면 문제가 생기겠죠?)
그럼 이 큰 파일을 어떻게 해결할까요?
1.코드스플리팅(loaderble활용했던 것 처럼)
2.극단적이지만 파일을 안 쓰는겁니다.
| webpack-bundle-analyzer를 활용한 배포
먼저, 라이브러리를 설치해줍시다.
npm i webpack-bundle-analyzer
타입스크립트를 사용하는 사람들은
@tpyes를 붙여 함께 설치해줍니다.
npm i @types/webpack-bundler-analyzer
활용
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
}
여러가지 기능
현재 제 프로젝트 코드로 설명을 들어보겠습니다!
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'; //번들라이저 import !
현재 저는 배포 환경에서의 설정과 로컬환경(dev)모드의 설정으로 나누어져있습니다.
기본적으로, BundleAnalyzerPlugin으로 import해왔기 때문에 해당 설정을 보시면 되는데요 !
BundleAnalyzer는 배포할 때 뿐만 아니라 dev환경에서도 동작을합니다.
저는 isDevelopment(false)를 배포 환경 설정을 알려주는 변수로 잡아뒀습니다.
const isDevelopment = process.env.NODE_ENV !== 'production';
개발 모드일 때 (npm run dev)
- analyzerMode : "server" (default는 server입니다.)
- openAnalyzer : false (default는true입니다)
->openAnalyzer는 browser창이 뜨는겁니다(위에 사진에서 확인한 각각의 파일 사이즈 이미지)
개발모드에서 analyzerMode가 server를 따로 띄워서 보입니다.
배포 모드일때 (npm run build)
analyzerMode: "static"
static은 html로 출력을 해주는건데요, 배포모드일 경우에는 server를 따로 띄울 수 없기 때문에 html로 띄워주겠다는 의미입니다.
production mode(배포용)으로 build를 하면 크기가 확실히 줄어드는것이 보이죠?
실제로 dev 모드가 아닌 production mode가 중요하기 때문에 production에서 build해보셔야 합니다.
production으로 build하면 자체적으로 파일 크기를 줄여준다고 하네요.
tree shaking(나무털기)방법으로 최적화를 진행한다고 합니다.(뭉쳐있는 애들과 작은 애들중에서 쪼갤 수 있는 애들은 쪼개줍니다.)
dist 폴더
build를 하면 최종적 배포를 위해 dist 폴더가 만들어지는데요(css파일도 함께 들어있습니다.),
안에 파일들을 backend 개발자에게 전달해주면 됩니다. (index.html 파일도 함께)
나중에 이걸 자동화 하려고 CI/CD tool을 활용하여 자동배포를 진행합니다.