Datagrid and Charting for Enterprise Applications

Optimization

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

optimization.checkWasmTypes

boolean

WebAssembly 모듈을 가져오거나 내보낼 때 호환되지 않는 유형의 WebAssembly 모듈을 확인하도록 webpack에 지시합니다. 기본적으로 optimization.checkWasmTypes는 프로덕션모드에서 활성화되고 그 외의 경우에는 비활성화됩니다.

webpack.config.js

module.exports = {
  //...
  optimization: {
    checkWasmTypes: false,
  },
};

optimization.chunkIds

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

청크 ID를 선택할 때 사용할 알고리즘을 결정합니다. optimization.chunkIds를 false로 설정하면, 플러그인을 통해 사용자 정의 알고리즘이 제공될 수 있으므로 내장 알고리즘을 사용해서는 안 된다고 webpack에 알립니다. optimization.chunkIds에 대한 몇 가지 기본값이 있습니다.

또한 개발 환경인 경우 optimization.chunkIds는 'named'로 설정되고 프로덕션 환경에서는 'deterministic'으로 설정됩니다.
위의 어느 것도 해당하지 않으면 optimization.chunkIds는 'natural'로 기본 설정됩니다.

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

옵션	설명
`'natural'`	사용 순서에 따른 숫자 ID입니다.
`'named'`	디버깅을 위한 식별 가능한 ID입니다.
`'deterministic'`	컴파일 간에 변경되지 않는 짧은 숫자 ID입니다. 장기 캐싱에 유용합니다. 프로덕션 모드에서 기본으로 활성화됩니다.
`'size'`	최소 초기 다운로드 크기에 초점을 맞춘 숫자 ID입니다.
`'total-size'`	최소 전체 다운로드 크기에 초점을 맞춘 숫자 ID입니다.

webpack.config.js

module.exports = {
  //...
  optimization: {
    chunkIds: 'named',
  },
};

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

webpack.config.js

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

optimization.concatenateModules

boolean

단일 모듈로 안전하게 연결할 수 있는 모듈 그래프의 세그먼트를 찾습니다. optimization.providedExports 및 optimization.usedExports에 의존합니다. 기본적으로 optimization.concatenateModules는 production mode에서 활성화되고 그 외에는 비활성화됩니다.

webpack.config.js

module.exports = {
  //...
  optimization: {
    concatenateModules: true,
  },
};

optimization.emitOnErrors

boolean = false

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

webpack.config.js

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

optimization.avoidEntryIife

boolean = false

5.95.0+

optimization.avoidEntryIife를 사용하면 엔트리 모듈이 필요할 때 IIFE로 감싸지는 것을 피할 수 있습니다(JavascriptModulesPlugin에서 "This entry needs to be wrap in an IIFE because"를 검색하세요). 이 접근 방식은 JavaScript 엔진의 성능을 최적화하는 데 도움이 되며 ESM 라이브러리를 빌드할 때 트리 쉐이킹을 가능하게 합니다.

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

기본적으로 optimization.avoidEntryIife는 production 모드에서 활성화되고 그렇지 않으면 비활성화됩니다.

webpack.config.js

module.exports = {
  //...
  optimization: {
    avoidEntryIife: true,
  },
};

optimization.flagIncludedChunks

boolean

더 큰 청크가 이미 로드된 경우, 다른 청크의 하위집합인 청크를 확인하고 하위집합을 로드하지 않는 방식으로 플래그를 지정합니다. 기본적으로 optimization.flagIncludedChunks는 production mode에서 활성화되고 그 외에는 비활성화됩니다.

webpack.config.js

module.exports = {
  //...
  optimization: {
    flagIncludedChunks: true,
  },
};

optimization.innerGraph

boolean = true

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

webpack.config.js

module.exports = {
  //...
  optimization: {
    innerGraph: false,
  },
};

optimization.mangleExports

boolean string: 'deterministic' | 'size'

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

기본적으로 optimization.mangleExports: 'deterministic'은 production mode에서 활성화되고 그 외에는 비활성화됩니다.

다음 값이 지원됩니다.

옵션	설명
`'size'`	짧은 이름(보통 단일 문자). 최소 다운로드 사이즈에 초점을 맞춥니다.
`'deterministic'`	짧은 이름(보통 두 개의 문자). export를 추가하거나 제거할 때도 변경되지 않습니다. 장기 캐싱에 유용합니다.
`true`	`'deterministic'`과 동일합니다.
`false`	원래 이름을 유지합니다. 가독성과 디버깅에 유용합니다

webpack.config.js

module.exports = {
  //...
  optimization: {
    mangleExports: true,
  },
};

optimization.mangleWasmImports

boolean = false

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

webpack.config.js

module.exports = {
  //...
  optimization: {
    mangleWasmImports: true,
  },
};

optimization.mergeDuplicateChunks

boolean = true

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

webpack.config.js

module.exports = {
  //...
  optimization: {
    mergeDuplicateChunks: false,
  },
};

optimization.minimize

boolean = true

TerserPlugin 또는 optimization.minimizer에 지정된 플러그인을 사용하여 번들을 최소화합니다.

webpack.config.js

module.exports = {
  //...
  optimization: {
    minimize: false,
  },
};

optimization.minimizer

[TerserPlugin] 또는 [function (compiler)] 또는 undefined | null | 0 | false | ""

하나 이상의 다른 TerserPlugin 인스턴스를 제공하여 기본 최소화 도구를 다시 설정할 수 있습니다. Webpack 5.87.0 부터는 falsy 값을 사용하여 특정 최소화 도구를 조건부로 비활성화할 수 있습니다.

webpack.config.js

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

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
        },
      }),
    ],
  },
};

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

module.exports = {
  optimization: {
    minimizer: [
      (compiler) => {
        const TerserPlugin = require('terser-webpack-plugin');
        new TerserPlugin({
          /* 당신의 설정 */
        }).apply(compiler);
      },
    ],
  },
};

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

[
  {
    apply: (compiler) => {
      // Lazy load the Terser plugin
      const TerserPlugin = require('terser-webpack-plugin');
      new TerserPlugin({
        terserOptions: {
          compress: {
            passes: 2,
          },
        },
      }).apply(compiler);
    },
  },
]; // eslint-disable-line

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

module.exports = {
  optimization: {
    minimizer: [new CssMinimizer(), '...'],
  },
};

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

optimization.moduleIds

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

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

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

옵션	설명
`natural`	사용 순서에 따른 숫자 ID입니다.
`named`	디버깅을 위한 식별 가능한 ID입니다.
`deterministic`	모듈 이름을 작은 숫자 값으로 해시합니다.
`size`	최소 초기 다운로드 크기에 초점을 맞춘 숫자 ID입니다.

webpack.config.js

module.exports = {
  //...
  optimization: {
    moduleIds: 'deterministic',
  },
};

deterministic 옵션은 장기 캐싱에 유용하지만 hashed 옵션에 비해 더 작은 번들을 생성합니다. 숫자 값의 길이는 ID 스페이스의 최대 80%를 채우게 됩니다. optimization.moduleIds가 deterministic으로 설정된 경우 기본적으로 최소 3자리 숫자가 사용됩니다. 기본 동작을 오버라이드하려면 optimization.moduleIds를 false로 설정하고 webpack.ids.DeterministicModuleIdsPlugin을 사용하세요.

webpack.config.js

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

optimization.nodeEnv

boolean = false string

webpack이 process.env.NODE_ENV를 주어진 문자열 값으로 설정하도록 합니다. optimization.nodeEnv를 false로 설정하지 않는 한 DefinePlugin을 사용합니다. 만약 mode가 설정되었다면 optimization.nodeEnv는 그 값을 기본으로 사용하고, 그렇지 않으면 'production'으로 폴백합니다.

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

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

webpack.config.js

module.exports = {
  //...
  optimization: {
    nodeEnv: 'production',
  },
};

optimization.portableRecords

boolean

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

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

webpack.config.js

module.exports = {
  //...
  optimization: {
    portableRecords: true,
  },
};

optimization.providedExports

boolean

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

webpack.config.js

module.exports = {
  //...
  optimization: {
    providedExports: false,
  },
};

optimization.realContentHash

boolean

애셋이 처리된 후 올바른 애셋 콘텐츠 해시를 얻기 위해 추가 해시 컴파일 패스를 추가합니다. realContentHash를 false로 설정하면 내부 데이터를 사용하여 해시를 산출하며 이는 애셋이 동일한 경우 변경될 수 있습니다. 기본적으로 optimization.realContentHash는 프로덕션 모드에서 활성화되고 그렇지 않으면 비활성화됩니다.

webpack.config.js

module.exports = {
  //...
  optimization: {
    realContentHash: false,
  },
};

optimization.removeAvailableModules

boolean = false

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

webpack.config.js

module.exports = {
  //...
  optimization: {
    removeAvailableModules: true,
  },
};

optimization.removeEmptyChunks

boolean = true

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

webpack.config.js

module.exports = {
  //...
  optimization: {
    removeEmptyChunks: false,
  },
};

optimization.runtimeChunk

object string boolean

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

webpack.config.js

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

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

webpack.config.js

module.exports = {
  //...
  optimization: {
    runtimeChunk: {
      name: 'runtime',
    },
  },
};

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

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

webpack.config.js

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

optimization.sideEffects

boolean = true string: 'flag'

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

package.json

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

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

webpack.config.js

module.exports = {
  //...
  optimization: {
    sideEffects: true,
  },
};

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

module.exports = {
  //...
  optimization: {
    sideEffects: 'flag',
  },
};

'flag'값은 비 프로덕션 빌드에서 기본적으로 사용됩니다.

optimization.splitChunks

object

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

optimization.usedExports

boolean = true string: 'global'

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

webpack.config.js

module.exports = {
  //...
  optimization: {
    usedExports: false,
  },
};

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

module.exports = {
  //...
  optimization: {
    usedExports: 'global',
  },
};

13 Contributors

Translators

keipark

Optimization

optimization.checkWasmTypes

optimization.chunkIds

optimization.concatenateModules

optimization.emitOnErrors

optimization.avoidEntryIife

optimization.flagIncludedChunks

optimization.innerGraph

optimization.mangleExports

optimization.mangleWasmImports

optimization.mergeDuplicateChunks

optimization.minimize

optimization.minimizer

optimization.moduleIds

optimization.nodeEnv

optimization.portableRecords

optimization.providedExports

optimization.realContentHash

optimization.removeAvailableModules

optimization.removeEmptyChunks

optimization.runtimeChunk

optimization.sideEffects

optimization.splitChunks

optimization.usedExports

Further Reading

13 Contributors

Translators