Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translate plugins/module-concatenation-plugin.mdx #385

Closed
wants to merge 11 commits into from
42 changes: 22 additions & 20 deletions src/content/plugins/module-concatenation-plugin.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,42 +5,44 @@ contributors:
- skipjack
- TheLarkInn
- byzyk
translators:
- jiwoo0629
---

In the past, one of webpack’s trade-offs when bundling was that each module in your bundle would be wrapped in individual function closures. These wrapper functions made it slower for your JavaScript to execute in the browser. In comparison, tools like Closure Compiler and RollupJS ‘hoist’ or concatenate the scope of all your modules into one closure and allow for your code to have a faster execution time in the browser.
과거에 번들링을 할 때 webpack의 절충점 중 하나는 번들의 각 모듈이 개별 함수 클로저에 의해 래핑된다는 점이었습니다. 이러한 래퍼 함수는 브라우저에서 자바스크립트의 실행을 느리게 만들었습니다. 이와 달리, Closure Comiler와 RollupJS와 같은 도구는 모든 모듈을 하나의 클로저로 호이스팅 하거나 연결하여 코드가 브라우저에서 더 빠른 실행 시간을 갖게 했습니다.

This plugin will enable the same concatenation behavior in webpack. By default this plugin is already enabled in [production `mode`](/configuration/mode/#mode-production) and disabled otherwise. If you need to override the production `mode` optimization, set the [`optimization.concatenateModules` option](/configuration/optimization/#optimizationconcatenatemodules) to `false`. To enable concatenation behavior in other modes, you can add `ModuleConcatenationPlugin` manually or use the `optimization.concatenateModules` option:
이 플러그인은 위의 내용과 같은 연결 동작이 webpack에서 가능하게 해줍니다. 기본적으로 이 플러그인은 [production `mode`](/configuration/mode/#mode-production)에서는 이미 가능하고 나머지에서는 아직 가능하지 않습니다. 만약 생산 `mode` 최적화를 무효로 해야 하는 경우, [`optimization.concatenateModules` 옵션](/configuration/optimization/#optimizationconcatenatemodules)`false`로 설정하세요. 다른 모드에서 연결 동작을 가능하게 하고 싶을 경우, `ModuleConcatenationPlugin`을 수동으로 설정하거나 `optimization.concatenateModules` 옵션을 사용하세요:

```js
new webpack.optimize.ModuleConcatenationPlugin();
```

> This concatenation behavior is called “scope hoisting.”
>
> Scope hoisting is specifically a feature made possible by ECMAScript Module syntax. Because of this webpack may fallback to normal bundling based on what kind of modules you are using, and [other conditions](https://medium.com/webpack/webpack-freelancing-log-book-week-5-7-4764be3266f5).
> 이 연결 동작은 “범위 호이스팅” 이라고 불립니다.
> 범위 호이스팅은 특별히 ECMAScript Module 문법에서 사용 가능하도록 만들어진 형태입니다. 이로 인해 webpack은 현재 사용 중인 모듈의 종류와 [다른 여러 조건](https://medium.com/webpack/webpack-freelancing-log-book-week-5-7-4764be3266f5)에 따라 평범한 번들링으로 퇴화할 수도 있습니다.

W> Keep in mind that this plugin will only be applied to [ES6 modules](/api/module-methods/#es6-recommended) processed directly by webpack. When using a transpiler, you'll need to disable module processing (e.g. the [`modules`](https://babeljs.io/docs/en/babel-preset-env#modules) option in Babel).
W> 이 플러그인은 webpack에서 직접 처리되는 [ES6 modules](/api/module-methods/#es6-recommended)에만 적용된 다는 점을 명심하세요. 트랜스파일러를 사용할 경우 모듈 처리를 비활성화해야 합니다. (예) Babel의 [`modules`] (https://babeljs.io/docs/en/babel-preset-env#modules) 옵션

## Optimization Bailouts

As the article explains, webpack attempts to achieve partial scope hoisting. It will merge modules into a single scope but cannot do so in every case. If webpack cannot merge a module, the two alternatives are Prevent and Root. Prevent means the module must be in its own scope. Root means a new module group will be created. The following conditions determine the outcome:
기사에서 설명하듯이 webpack은 부분적인 범위 호이스팅을 시도합니다. 이는 모듈을 하나의 범위로 합치지만 모든 경우에 합치지는 못합니다. 만약 webapck이 모듈을 합칠 수 없다면 두 가지 대안은 Prevent와 Root 입니다. Prevent는 모듈이 반드시 그 자신의 범위 안에 있어야 한다는 것을 의미합니다. Root는 새로운 모듈 그룹이 생성될 것이라는 의미입니다. 다음의 조건이 결과를 결정합니다:

| Condition | Outcome |
| --------------------------------------------- | ------- |
| Non ES6 Module | Prevent |
| Imported By Non Import | Root |
| Imported From Other Chunk | Root |
| Imported By Multiple Other Module Groups | Root |
| Imported With `import()` | Root |
| Affected By `ProvidePlugin` Or Using `module` | Prevent |
| HMR Accepted | Root |
| Using `eval()` | Prevent |
| In Multiple Chunks | Prevent |
| `export * from "cjs-module"` | Prevent |
| Condition | Outcome |
| --------------------------------------------- | ------- |
| Non ES6 Module | Prevent |
| Non Import로 가져옴 | Root |
| 다른 청크에서 가져옴 | Root |
| 다수의 다른 모듈 그룹에서 가져옴 | Root |
| `import()`로 가져옴 | Root |
| `ProvidePlugin`의 영향을 받거나 `module` 사용 | Prevent |
| HMR 허용 | Root |
| `eval()` 사용 | Prevent |
| 다수의 청크 | Prevent |
| "cjs-module"로부터 * 내보내기 | Prevent |

### Module Grouping Algorithm

The following pseudo JavaScript explains the algorithm:
아래의 의사 자바스크립트는 이 알고리즘을 설명합니다:

```js
modules.forEach((module) => {
Expand Down Expand Up @@ -84,7 +86,7 @@ function tryToAdd(group, module) {

### Debugging Optimization Bailouts

When using the webpack CLI, the `--display-optimization-bailout` flag will display bailout reasons. When using the webpack config, add the following to the `stats` object:
webpack CLI를 사용할 경우 `--display-optimization-bailout` 플래그는 bailout 원인을 보여줍니다. webpack config를 사용할 경우 `stats` 객체에 다음을 추가하세요.

```js
module.exports = {
Expand Down
50 changes: 26 additions & 24 deletions src/content/plugins/progress-plugin.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,29 +6,31 @@ contributors:
- EugeneHlushko
- byzyk
- smelukov
translators:
- jiwoo0629
---

`object = { boolean activeModules = true, boolean entries = false, function (number percentage, string message, [string] ...args) handler, boolean modules = true, number modulesCount = 500, boolean profile = false }`

`function (number percentage, string message, [string] ...args)`

The `ProgressPlugin` provides a way to customize how progress is reported during a compilation.
`ProgressPlugin`은 컴파일 도중에 진행 상황을 보고받을 방법을 자신이 원하는대로 정하는 방법을 제공합니다.

## Usage

Create an instance of `ProgressPlugin` and provide one of the allowed params.
`ProgressPlugin`의 인스턴스를 만들고, 허용되는 여러 매개변수 중 하나를 제공합니다.

### Providing `function`

Provide a handler function which will be called when hooks report progress. `handler` function arguments:
훅이 진행 상황을 보고할 때 호출될 handler 함수를 제공합니다. 함수 `handler`의 실행 인자:

- `percentage`: a number between 0 and 1 indicating the completion percentage of the compilation
- `message`: a short description of the currently-executing hook
- `...args`: zero or more additional strings describing the current progress
- `percentage`: 컴파일의 성공 확률을 나타내는 0과 1 사이의 숫자
- `message`: 현재 실행중인 훅에 대한 짧은 설명
- `...args`: 현재 실행 상황을 묘사하는 0개 이상의 추가적인 문자열

```js
const handler = (percentage, message, ...args) => {
// e.g. Output each progress message directly to the console:
// 예를 들어, 각 진행 메세지를 콘솔에 직접 출력
console.info(percentage, message, ...args);
};

Expand All @@ -37,24 +39,24 @@ new webpack.ProgressPlugin(handler);

### Providing `object`

When providing an `object` to the `ProgressPlugin`, following properties are supported:
`ProgressPlugin`에 `object`를 제공할 때, 다음의 속성이 지원됩니다

- `activeModules` (`boolean = false`): Shows active modules count and one active module in progress message.
- `entries` (`boolean = true`): Shows entries count in progress message.
- `handler` (See [Providing function](#providing-function))
- `modules` (`boolean = true`): Shows modules count in progress message.
- `modulesCount` (`number = 5000`): A minimum modules count to start with. Takes effect when `modules` property is enabled.
- `profile` (`boolean = false`): Tells `ProgressPlugin` to collect profile data for progress steps.
- `dependencies` (`boolean = true`): Shows the count of dependencies in progress message.
- `dependenciesCount` (`number = 10000`): A minimum dependencies count to start with. Takes effect when `dependencies` property is enabled.
- `percentBy` (`string = null: 'entries' | 'dependencies' | 'modules' | null`): Tells `ProgressPlugin` how to calculate progress percentage.
- `activeModules` (`boolean = false`): 활성화된 모듈의 수와 활성화된 모듈 하나를 진행 메세지로 보여줍니다.
- `entries` (`boolean = true`): 엔트리 수를 진행 메세지로 보여줍니다.
- `handler` ([Providing function](#providing-function)을 보세요)
- `modules` (`boolean = true`): 모듈 수를 진행 메세지로 보여줍니다.
- `modulesCount` (`number = 5000`): 시작할 모듈 수의 최솟값이며 `modules` 속성이 활성화되면 적용됩니다.
- `profile` (`boolean = false`): 진행 단계의 프로필 정보를 수집하도록 `ProgressPlugin`에게 알려줍니다.
- `dependencies` (`boolean = true`): 종속성 수를 진행 메세지로 보여줍니다.
- `dependenciesCount` (`number = 10000`): 시작할 종속성 수의 최솟값이며 `dependencies` 속성이 활성화되면 적용됩니다.
- `percentBy` (`string = null: 'entries' | 'dependencies' | 'modules' | null`): 진행률을 계산할 방법을 `ProgressPlugin`에게 알려줍니다.

```js
new webpack.ProgressPlugin({
activeModules: false,
entries: true,
handler(percentage, message, ...args) {
// custom logic
// 사용자 지정 로직
},
modules: true,
modulesCount: 5000,
Expand All @@ -67,19 +69,19 @@ new webpack.ProgressPlugin({

## Percentage calculation

By default, progress percentage is calculated based on built modules count and total modules count: `built / total`
기본적으로 진행률은 빌드된 모듈 수와 총 모듈 수를 기반으로 계산됩니다: `built / total`

The total modules count is unknown in advance and changes during the build. This may cause inaccurate progress percentage.
총 모듈 수는 사전에는 알 수 없고 빌드를 거치면서 변합니다. 이는 부정확한 진행률을 야기할 수 있습니다.

To solve this problem `ProgressPlugin` caches the last known total modules count and reuses this value on the next build. The first build will warm the cache but the following builds will use and update this value.
이러한 문제를 해결하기 위해 `ProgressPlugin`은 마지막으로 알려진 총 모듈 수를 캐시하여 이 값을 다음 빌드 때 재사용합니다. 첫번째 빌드는 데이터 값을 메모리에 캐시하지만 그 다음 빌드들은 이 값을 사용하고 업데이트합니다.

> We recommend using `percentBy: 'entries'` setting for projects with [multiple configured entry points](/configuration/entry-context/#entry). Percentage calculation will become more accurate because the amount of entry points is known in advance.
> [다중 구성된 엔트리 포인트](/configuration/entry-context/#entry)가 있는 프로젝트들을 위한 설정에는 `percentBy: 'entries'`를 사용할 것을 추천합니다. 엔트리 포인트의 개수를 미리 알 수 있기 때문에 확률 계산은 더욱 정확해질 것입니다.

## Supported Hooks

The following hooks report progress information to `ProgressPlugin`.
다음 훅은 `ProgressPlugin`에 진행 정보를 보고합니다.

T> _Hooks marked with \* allow plugins to report progress information using `reportProgress`. For more, see [Plugin API: Reporting Progress](/api/plugins/#reporting-progress)_
T> _\* 표시된 훅은 plugin이 `reportProgress`를 이용하여 진행 정보를 보고하도록 허용합니다. 자세한 내용은 [Plugin API: Reporting Progress](/api/plugins/#reporting-progress)를 참고하세요._

**Compiler**

Expand Down