Optimization

Webpack은 선택된 모드에 따라 최적화를 실행하기 때문에, 여전히 모든 최적화는 수동 구성 및 재정의에 사용할 수 있습니다.

optimization.checkWasmTypes

boolean

WebAssembly 모듈을 가져오거나 내보낼 때 호환되지 않는 유형의 WebAssembly 모듈을 확인하도록 webpack에 지시합니다.

optimization.checkWasmTypes의 기본값은 mode에 따라 다릅니다.

webpack.config.js

export default {
  // ...
  optimization: {
    checkWasmTypes: false,
  },
};

optimization.chunkIds

boolean: false string: 'natural' | 'named' | 'size' | 'total-size' | 'deterministic'

• false: webpack의 내장 청크 ID 알고리즘을 비활성화합니다.
• 다음 값 중 하나:
  • 'natural'
  • 'named'
  • 'size'
  • 'total-size'
  • 'deterministic'

Webpack에게 청크 ID에 사용할 알고리즘을 지정합니다. optimization.chunkIds를 false로 설정하면 Webpack은 내장 알고리즘을 사용하지 않고 플러그인을 통해 사용자 지정 알고리즘을 제공하도록 지시합니다. optimization.chunkIds에는 몇 가지 기본값이 있습니다.

optimization.chunkIds의 기본값은 mode에 따라 다릅니다.

다음 문자열 값이 지원됩니다.

webpack.config.js

export default {
  // ...
  optimization: {
    chunkIds: "named",
  },
};

기본적으로 optimization.chunkIds가 'deterministic'으로 설정된 경우 최소 3자리 숫자가 사용됩니다. 기본 동작을 오버라이드하려면 optimization.chunkIds를 false로 설정하고 webpack.ids.DeterministicChunkIdsPlugin을 사용하세요.

webpack.config.js

export default {
  // ...
  optimization: {
    chunkIds: false,
  },
  plugins: [
    new webpack.ids.DeterministicChunkIdsPlugin({
      maxLength: 5,
    }),
  ],
};

optimization.concatenateModules

boolean

단일 모듈로 안전하게 연결할 수 있는 모듈 그래프의 세그먼트를 찾습니다. optimization.providedExports 및 optimization.usedExports에 의존합니다.

optimization.concatenateModules의 기본값은 mode에 따라 다릅니다.

webpack.config.js

export default {
  // ...
  optimization: {
    concatenateModules: true,
  },
};

optimization.emitOnErrors

boolean

컴파일 중 오류가 발생할 때마다 애셋을 내보내려면 optimization.emitOnErrors를 사용하세요. 이렇게 하면 오류가 있는 애셋이 방출됩니다. 심각한 오류는 생성된 코드로 내보내지고 런타임에 오류를 발생시킵니다.

optimization.emitOnErrors의 기본값은 mode에 따라 다릅니다.

webpack.config.js

export default {
  // ...
  optimization: {
    emitOnErrors: true,
  },
};

optimization.avoidEntryIife

boolean

진입 모듈을 IIFE로 감싸야 하는 경우 optimization.avoidEntryIife를 사용해 IIFE 래핑을 피할 수 있습니다.(JavascriptModulesPlugin에서 "This entry needs to be wrapped in an IIFE because"를 검색해보세요.) 이 접근 방식은 JavaScript 엔진의 성능을 최적화하고 ESM 라이브러리 빌드 시 트리 셰이킹을 가능하게 합니다.

현재 optimization.avoidEntryIife는 다른 모듈과 함께 단일 항목 모듈만 최적화할 수 있습니다.

optimization.avoidEntryIife의 기본값은 mode에 따라 다릅니다.

webpack.config.js

export default {
  // ...
  optimization: {
    avoidEntryIife: true,
  },
};

optimization.flagIncludedChunks

boolean

더 큰 청크가 이미 로드된 경우, 다른 청크의 하위집합인 청크를 식별하고 더 큰 청크만으로 충분할 때 하위집합 청크를 다시 로드하지 않도록 플래그를 지정합니다.

optimization.flagIncludedChunks의 기본값은 mode에 따라 다릅니다.

webpack.config.js

export default {
  // ...
  optimization: {
    flagIncludedChunks: true,
  },
};

optimization.innerGraph

boolean

optimization.innerGraph는 사용되지 않은 export에 대해 내부 그래프 분석을 수행할지를 결정합니다.

optimization.innerGraph의 기본값은 mode에 따라 다릅니다.

webpack.config.js

export default {
  // ...
  optimization: {
    innerGraph: false,
  },
};

optimization.mangleExports

boolean string: 'deterministic' | 'size'

optimization.mangleExports를 사용하면 export 맹글링을 제어할 수 있습니다.

optimization.mangleExports의 기본값은 mode에 따라 다릅니다.

다음 값이 지원됩니다.

webpack.config.js

export default {
  // ...
  optimization: {
    mangleExports: true,
  },
};

optimization.mangleWasmImports

boolean = false

true로 설정하면 import를 짧은 문자열로 변경하여 WASM 크기를 줄입니다. 모듈 및 export 이름이 맹글됩니다.

webpack.config.js

export default {
  // ...
  optimization: {
    mangleWasmImports: true,
  },
};

optimization.mergeDuplicateChunks

boolean = true

동일한 모듈을 포함하는 청크를 병합합니다. optimization.mergeDuplicateChunks를 false로 설정하면 이 최적화가 비활성화됩니다.

webpack.config.js

export default {
  // ...
  optimization: {
    mergeDuplicateChunks: false,
  },
};

optimization.minimize

boolean

MinimizerPlugin 또는 optimization.minimizer에 지정된 플러그인을 사용해 번들을 최소화하도록 webpack에 지시합니다.

optimization.minimize의 기본값은 mode에 따라 다릅니다.

webpack.config.js

export default {
  // ...
  optimization: {
    minimize: false,
  },
};

optimization.minimizer

[MinimizerPlugin] and/or [function (compiler)] or undefined | null | 0 | false | ""

하나 이상의 사용자 지정 MinimizerPlugin 인스턴스 또는 다른 minimizer를 제공해 기본 minimizer를 재정의할 수 있습니다. webpack 5.87.0부터는 falsy 값을 사용해 특정 minimizer를 조건부로 비활성화할 수도 있습니다.

webpack.config.js

import MinimizerPlugin from "minimizer-webpack-plugin";

export default {
  optimization: {
    minimizer: [
      new MinimizerPlugin({
        parallel: true,
        minimizerOptions: {
          // https://github.com/webpack/minimizer-webpack-plugin#minimizeroptions
        },
      }),
    ],
  },
};

또는 함수로 제공할 수 있습니다.

import MinimizerPlugin from "minimizer-webpack-plugin";

export default {
  optimization: {
    minimizer: [
      (compiler) => {
        new MinimizerPlugin({
          /* your config */
        }).apply(compiler);
      },
    ],
  },
};

기본적으로 webpack은 optimization.minimizer를 다음 값으로 설정합니다.

import MinimizerPlugin from "minimizer-webpack-plugin";

const minimizer = [
  {
    apply: (compiler) => {
      new MinimizerPlugin({
        minimizerOptions: {
          compress: {
            passes: 2,
          },
        },
      }).apply(compiler);
    },
  },
];

optimization.minimizer를 사용자 정의할 때 기본 값을 유지하려는 경우 '...'로 접근할 수 있습니다.

export default {
  optimization: {
    minimizer: [new CssMinimizer(), "..."],
  },
};

기본적으로, '...'은 기본 설정값에 접근하는 지름길 입니다. 그렇지 않으면 webpack이 우리를 위해 설정합니다.

optimization.moduleIds

boolean: false string: 'natural' | 'named' | 'deterministic' | 'size'

모듈 ID를 선택할 때 사용할 알고리즘을 결정합니다. optimization.moduleIds를 false로 설정하면, 플러그인을 통해 사용자 정의 알고리즘이 제공될 수 있으므로 내장 알고리즘을 사용해서는 안 된다고 webpack에 알립니다.

optimization.moduleIds의 기본값은 mode에 따라 다릅니다.

다음 문자열 값이 지원됩니다.

webpack.config.js

export default {
  // ...
  optimization: {
    moduleIds: "deterministic",
  },
};

deterministic 옵션은 장기 캐싱에 유용하지만, hashed 옵션에 비해 번들 크기가 더 작습니다. 숫자 값의 길이는 ID 공간의 최대 80%를 채우도록 선택됩니다. 기본적으로 optimization.moduleIds가 deterministic으로 설정된 경우 최소 3자리 숫자가 사용됩니다. 기본 동작을 재정의하려면 optimization.moduleIds를 false로 설정하고 webpack.ids.DeterministicModuleIdsPlugin을 사용하십시오.

webpack.config.js

export default {
  // ...
  optimization: {
    moduleIds: false,
  },
  plugins: [
    new webpack.ids.DeterministicModuleIdsPlugin({
      maxLength: 5,
    }),
  ],
};

optimization.nodeEnv

boolean: false string

webpack이 process.env.NODE_ENV를 주어진 문자열 값으로 설정하도록 합니다. optimization.nodeEnv를 false로 설정하지 않는 한 DefinePlugin을 사용합니다.

optimization.nodeEnv의 기본값은 mode에 따라 다릅니다.

사용 가능한 값은 아래와 같습니다.

• 모든 문자열: process.env.NODE_ENV를 설정하는 값입니다.
• false: process.env.NODE_ENV값을 수정하거나 설정하지 않습니다.

webpack.config.js

export default {
  // ...
  optimization: {
    nodeEnv: "production",
  },
};

optimization.portableRecords

boolean

optimization.portableRecords는 컨텍스트 폴더를 이동할 수 있도록 상대 경로가 있는 레코드를 생성하도록 합니다.

기본적으로 optimization.portableRecords는 비활성화되어 있습니다. 다음 레코드 옵션중 하나라도 webpack 설정에 제공되면 자동으로 활성화됩니다. recordsPath, recordsInputPath, recordsOutputPath.

webpack.config.js

export default {
  // ...
  optimization: {
    portableRecords: true,
  },
};

optimization.providedExports

boolean

export * from ...에서 보다 효율적인 코드를 생성하기 위해 모듈에서 어떤 export가 제공되는지 파악합니다. 기본적으로 optimization.providedExports가 활성화됩니다.

webpack.config.js

export default {
  // ...
  optimization: {
    providedExports: false,
  },
};

optimization.realContentHash

boolean

애셋이 처리된 후 올바른 애셋 콘텐츠 해시를 얻기 위해 추가 해시 컴파일 패스를 수행합니다. realContentHash를 false로 설정하면 내부 데이터를 사용해 해시를 계산하며, 애셋이 동일하더라도 값이 변경될 수 있습니다.

optimization.realContentHash의 기본값은 mode에 따라 다릅니다.

webpack.config.js

export default {
  // ...
  optimization: {
    realContentHash: false,
  },
};

optimization.removeAvailableModules

boolean = false

모듈이 이미 모든 상위에 포함되어있는 경우 청크에서 해당 모듈을 감지하고 제거합니다. optimization.removeAvailableModules를 true로 설정하면 이 최적화가 활성화됩니다.

webpack.config.js

export default {
  // ...
  optimization: {
    removeAvailableModules: true,
  },
};

optimization.removeEmptyChunks

boolean = true

빈 청크를 감지하고 제거합니다. optimization.removeEmptyChunks를 false로 설정하면 이 최적화가 비활성화됩니다.

webpack.config.js

export default {
  // ...
  optimization: {
    removeEmptyChunks: false,
  },
};

optimization.runtimeChunk

object string boolean

optimization.runtimeChunk를 true 또는 'multiple'로 설정하면 런타임만 포함된 추가 청크가 각 엔트리 포인트에 추가됩니다. 이 설정은 다음에 대한 별칭입니다.

webpack.config.js

export default {
  // ...
  optimization: {
    runtimeChunk: {
      name: (entrypoint) => `runtime~${entrypoint.name}`,
    },
  },
};

이 대신 'single'값을 설정하면 생성된 모든 청크에서 공유할 런타임 파일을 생성합니다. 이 설정은 다음에 대한 별칭입니다.

webpack.config.js

export default {
  // ...
  optimization: {
    runtimeChunk: {
      name: "runtime",
    },
  },
};

optimization.runtimeChunk를 object로 설정하면 런타임 청크의 이름 또는 이름 팩토리를 나타내는 name 속성만 제공 할 수 있습니다.

기본값은 false입니다. 각 엔트리 청크에는 런타임이 포함됩니다.

webpack.config.js

export default {
  // ...
  optimization: {
    runtimeChunk: {
      name: (entrypoint) => `runtimechunk~${entrypoint.name}`,
    },
  },
};

optimization.sideEffects

boolean string: 'flag'

package.json의 sideEffects 플래그를 인식합니다. 또는 사이드 이펙트 없음으로 플래그 된 모듈은 export가 사용되지 않을 때 건너뛰도록 합니다.

package.json

{
  "name": "awesome npm module",
  "version": "1.0.0",
  "sideEffects": false
}

optimization.sideEffects는 optimization.providedExports 활성화에 의존합니다. 이 디펜던시는 빌드 시간 비용이 들지만, 모듈을 제거하면 코드 생성이 적기 때문에 성능에 긍정적인 영향을 미칩니다. 이 최적화의 효과는 코드 베이스에 따라 다르므로 가능한 성능 향상을 위해 시도해보세요.

optimization.sideEffects의 기본값은 mode에 따라 다릅니다.

webpack.config.js

export default {
  // ...
  optimization: {
    sideEffects: true,
  },
};

수동 플래그만 사용하고 소스 코드를 분석하지 않으려면 아래와 같이 사용하세요.

export default {
  // ...
  optimization: {
    sideEffects: "flag",
  },
};

optimization.splitChunks

object

webpack v4+에서는 동적으로 가져온 모듈에 새로운 공통 청크 전략을 바로 사용할 수 있습니다. SplitChunksPlugin 페이지에서 이 동작을 설정할 때 사용 가능한 옵션을 확인해보세요.

optimization.usedExports

boolean string: 'global'

각 모듈에서 사용된 export를 확인합니다. 이는 optimization.providedExports에 의존합니다. optimization.usedExports에 의해 수집된 정보는 다른 최적화 또는 코드 생성에 사용됩니다. 즉, 사용하지 않은 export는 생성되지 않으며, 모든 사용이 호환되는 경우 export 이름이 단일 식별자로 변경됩니다. 최소화 도구로 데드 코드 제거 시 이로 인해 사용하지 않은 export를 제거 할 수 있습니다.

optimization.usedExports의 기본값은 mode에 따라 다릅니다.

webpack.config.js

export default {
  // ...
  optimization: {
    usedExports: false,
  },
};

런타임 당 사용된 export 분석에서 제외하려면 아래와 같이 사용하세요.

export default {
  // ...
  optimization: {
    usedExports: "global",
  },
};