webpack 소스 코드 최적화

Minification & Mangling

 - 코드를 압축 및 난독화

 - Application에 관여하지 않는 문자열 제거(주석 등)

 - 들여쓰기, 띄어쓰기와 같은 공백문자 제거

 - 분기문을 3항연산자로 표현 

 

Webpack 설정

HTML

 - html-webpack-plugin에서 html파일의 minifiaction설정이 가능

module.exports = {
    ...,
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Webpack',
            template: './template.hbs',
            meta:{
                viewport: "width=device-width, initial-scale=1.0"
            },
            minify:{
                removeComments: true,
                useShortDoctype: true
            }
        }),
        ...
    ],
    ...
}

 - 프로젝트를 build하면 dist/index.html의 공백문자제거, 주석제거 등이 이루어진다.

 - 옵션의 자세한 내용은 아래 링크 참조

{
  collapseWhitespace: true,
  keepClosingSlash: true,
  removeComments: true,
  removeRedundantAttributes: true,
  removeScriptTypeAttributes: true,
  removeStyleLinkTypeAttributes: true,
  useShortDoctype: true
}

https://github.com/jantimon/html-webpack-plugin

GitHub - jantimon/html-webpack-plugin: Simplifies creation of HTML files to serve your webpack bundles

 

 

CSS

 - 플러그인 설치

yarn add cssnano css-minimizer-webpack-plugin -D

 - webpack.config.js에 플러그인 적용 후 프로젝트를 build하면 css파일의 내용이 최적화가 되어 나온다.

const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
    ...,
    plugins: [
        ...,
        new CssMinimizerWebpackPlugin()
    ],
    ...
}

 - css-minimizer-webpack-plugin의 자세한 내용

https://webpack.js.org/plugins/css-minimizer-webpack-plugin/

CssMinimizerWebpackPlugin | webpack

 

Javascript 최적화

 - terser를 이용

 - webpack이 기본적으로 채택한 module

 - terser는 webpack을 설치하면 자동으로 설치되며 plugin만 설치한다.

yarn add terser-webpack-plugin -D

 - webpack.config.js의 내용을 수정한다.

 - terser는 plugins옵션에 넣지 않고 optimization에서 설정한다.

const TerserWebpackPlugin = require('terser-webpack-plugin');

module.exports = {
    ...,
    optimization:{
        ...,
        minimize: true,
        minimizer: [
            new TerserWebpackPlugin()
        ]
    },
    ...
}

 - 자세한 내용

https://www.npmjs.com/package/terser-webpack-plugin

terser-webpack-plugin

 - 프로젝트를 build할 경우 javascript파일의 최적화가 이루진다.