Optimization

웹팩에서 최적화는 mode 에 따라 다르게 적용되고 manual configuration하거나 overrides 방식으로 사용됩니다.

따라서 development 와 production 에 대한 구성을 따로 파일로 만들어서 사용할 수 도 있습니다.

• webpack.common.js
• webpack.dev.js
• webpack.prod.js

이 부분은 다음 포스트에서 다루겠습니다.

Mode

mode 옵션은 mode에 따른 내장 최적화(built-in optimizations)를 사용하도록 합니다.

Usage

• mode 옵션 설정

  • mode = 'none' | 'development' | 'production'

  • webpack.config.js

  module.exports = {
  + mode: 'production'(default) | 'development' | 'none',
  }

• CLI를 통해 mode 설정: --mode 사용

  • webpack --mode=development

The following string values are supported:

Option	Description
development	Sets process.env.NODE_ENV on DefinePlugin to value development. Enables useful names for modules and chunks.
production(default)	Sets process.env.NODE_ENV on DefinePlugin to value production. Enables deterministic mangled names for modules and chunks, FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin and TerserPlugin.
none	Opts out of any default optimization options

Optimazation Options

여러 옵션에 대해 자세히 알고싶으시면 Optimazation Options을 클릭해주세요.

minimize(boolean = true)

TerserPlugin 또는 optimization.minimizer에 명시된 plugins로 bundle 파일을 최소화(=압축)시키는 작업 여부를 결정합니다.

webpack.config.js

module.exports = {
  //...
+ optimization: {
+   minimize: true | false
+ }
};

minimizer

defualt minimizer을 커스텀된 TerserPlugin 인스턴스를 제공해서 재정의할 수 있습니다.

webpack.config.js

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

module.exports = {
  optimization: {
  + minimizer: [
  +   new TerserPlugin({
  +     cache: true,
  +     parallel: true,
  +     sourceMap: true, // Must be set to true if using source-maps in production
  +     terserOptions: {
          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
        }
      }),
    ],
  }
};

splitChunks

default로 웹팩은 동적으로 imported modules을 위한 공통 청크 전략을 제공합니다.

See available options for configuring this behavior in the SplitChunksPlugin page.

이 부분도 다음 포스트에서 더 자세히 다뤄보겠습니다.

emitOnError

Optimization.emitOnErrors를 사용하여 컴파일하는 동안 오류가있을 때마다 오류가 발생한 assets을 알려줍니다.

webpack.config.js

module.exports = {
  //...
  optimization: {
 +  emitOnErrors: true
  }
};