배포하기

배포

-webpack-bundle-analyzer  

npm i webpack-bundle-analyzer

npm i -D @types/webpack-bundle-analyzer

이걸 깔아서 사용한다.

프론트엔드 개발자라면 webpack에 bundle-analyzer을 까는게 좋다. 왜냐하면 용량을 확인할 수 있기 때문이다. 그래서 배포 전 압축했을 때 용량을 확인할 수 있다.

 

이것은 개발 모드와 배포 모드로 나눠서 사용해야 한다.

if (isDevelopment && config.plugins) {
  config.plugins.push(new webpack.HotModuleReplacementPlugin());
  config.plugins.push(new ReactRefreshWebpackPlugin());
  config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'server', openAnalyzer: true }));
}

이 서버는 배포 모드가 아닐 때도 실행된다. if문 안에 마지막 줄의 openAnalyzer를 true로 바꾸면

이런 화면이 나오게된다. 마우스를 올리면 용량을 확인할 수 있다.

 

배포 시작

if (isDevelopment && config.plugins) {
  config.plugins.push(new webpack.HotModuleReplacementPlugin());
  config.plugins.push(new ReactRefreshWebpackPlugin());
  config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'server', openAnalyzer: true }));
}
if (!isDevelopment && config.plugins) {
  //요즘은 아래 한 줄 코드가 필요가 없는데 옛날 플로그는 최적화 시켜줄 수 있다.
  config.plugins.push(new webpack.LoaderOptionsPlugin({ minimize: true }));
  config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static' }));
}

 

여기서 주의할 점은 NODE_ENV가 production일 때 배포 모드이다.

-package.json

    "build": "cross-env NODE_ENV=production TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack",

따라서 build에다가 NODE_ENV=production이라고 적어줘야 한다.

 

이렇게 하고

npm run build

이걸 한다.

 

이런 화면이 뜬다.

마우스를 올리면 Gzipped size인 압축된 용량도 볼 수 있다.

 

-tree-shaking

용량이 너무 크면 코드 스플리팅 같은 기법으로 줄일 수 있다. 다른 방법으로는 tree-shaking이 있다. 이것은 위 사진에서 보듯이 컴포넌트가 큰 것도 있고 작은 것도 있다. 큰거에서는 이걸 잘게 쪼갤 수 있나 보는 것이고 작은거에서는 쓸모없는 것을 나뭇잎 처럼 털어낼 수 있나 보는 것이다. 보통 쓸모없는 이미지나 폰트를 많이 털어낸다.

따라서 만약 react-mentions가 용량이 커서 털고 싶으면 구글에 react-mentions tree-shaking을 검색해서 나오면 털 수 있는거고 안나오면 못 터는 것이다.

 

결론적으로는

이렇게 나온 dist 파일들과, index.html 파일을 백엔드에 갖다줘야 한다.