[ VanillaJS ] webpack5 - 빌드 최적화
빌드 최적화 하기
배포용 빌드할 때 용량, 모듈 등 많은 것을 최적화 해야 한다.
yarn add -D terser-webpack-plugin
yarn add -D css-minimizer-webpack-plugin
yarn add -D webpack-bundle-analyzer
webpack.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
Author And Source
이 문제에 관하여([ VanillaJS ] webpack5 - 빌드 최적화), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@bepyan/VanillaJS-webpack5-빌드-최적화저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)