빌드 최적화 하기
배포용 빌드할 때 용량, 모듈 등 많은 것을 최적화 해야 한다.
yarn add -D terser-webpack-plugin
yarn add -D css-minimizer-webpack-plugin
yarn add -D webpack-bundle-analyzerwebpack.prod.js 파일
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
//...
// devtool: "source-map", // 배포 디버깅용
optimization: {
usedExports: true,
minimize: true,
minimizer: [
new BundleAnalyzerPlugin(),
new CssMinimizerPlugin(),
new TerserPlugin(),
],
splitChunks: {
chunks: "all",
},
},- usedExports
- 사용되지 않는 import는 번들링하지 않는다.
- BundleAnalyzerPlugin
- 현재 사용하고 있는 번들크기를 시각화한 treemap을 볼 수 있다.
- TerserPlugin
- Javascript 코드를 minify/minimize 해준다.
- CssMinimizerPlugin
- CSS 파일을 minify 해준다.
- Chunk 나누기
- 추후에 알아보자...
- Tree shaking
쿠키 공장 이전 중 🚛 쿠키 나누는 것을 좋아해요.