DllPlugin

DllPluginê³¼ DllReferencePlugin은 빌드 시간 성능을 크게 향상시키는 방식으로 번들을 분할하는 수단을 제공합니다. "DLL"이라는 용어는 원래 Microsoft에서 도입한 동적 링크 라이브러리를 나타냅니다.

DllPlugin

이 플러그인은 dll 전용 번들을 생성하기 위해 단독으로 별도의 webpack 설정에서 사용됩니다. 의존성을 매핑하기 위해 DllReferencePlugin에서 사용하는 manifest.json파일을 생성합니다.

• context (선택): 매니페스트 파일의 요청 컨텍스트 (기본값은 webpack 컨텍스트)
• format (boolean = false): true인 경우 매니페스트 json 파일(출력)이 형식화됩니다.
• name: 노출된 dll 함수의 이름 (TemplatePaths: [fullhash], [chunkhash], [contenthash], & [name] )
• path: 매니페스트 json 파일의 절대 경로 (출력)
• entryOnly (boolean = true): true인 경우 엔트리 포인트만 노출됩니다.
• type: dll 번들의 유형

new webpack.DllPlugin(options);

주어진 경로에 기록되는 manifest.json을 생성합니다. 여기에는 require와 import 요청에서 모듈 id로의 매핑이 포함됩니다. 이는 DllReferencePlugin 에서 사용됩니다.

이 플러그인을 output.library옵션과 결합하여 dll 함수를 노출(전역 범위로 확대)합니다.

DllReferencePlugin

이 플러그인은 기본 webpack 설정에서 사용되며, 사전 빌드된 의존성을 require 하기 위해 dll 전용 번들을 참조합니다.

• context: 매니페스트(또는 콘텐츠 프로퍼티)에 있는 요청의 (절대 경로) 컨텍스트
• extensions: dll 번들의 모듈을 해결하는데 사용되는 확장입니다(‘유효범위’를 사용할 때만 사용).
• manifest : content 및 name을 포함하는 객체 또는 컴파일 시 로드될 JSON 매니페스트의 절대 경로에 대한 문자열
• content (선택): 요청에서 모듈 id 로의 매핑(기본값은 manifest.content)
• name (선택): dll이 노출되는 식별자(기본값은 manifest.name)(externals 참조)
• scope (선택): dll의 콘텐츠에 접근하는데 사용되는 접두사
• sourceType (선택): dll이 노출되는 방법(libraryTarget)

new webpack.DllReferencePlugin(options);

dll 매니페스트 파일을 참조하여 의존성 이름을 모듈 id에 매핑한 다음, 내부 __webpack_require__함수를 사용하여 필요에 따라 요청합니다.

Modes

이 플러그인은 scoped 와 mapped 두 가지 모드에서 사용할 수 있습니다.

Scoped Mode

dll의 콘텐츠는 모듈 접두사 아래에서 접근 가능합니다. 즉, scope = 'xyz'로 dll의 파일 abc 는 require('xyz/abc')를 통해 접근할 수 있습니다.

Mapped Mode

dll의 콘텐츠는 현재 디렉터리에 매핑됩니다. 필요한 파일이 dll의 파일과 확인 후 일치하는 경우, dll의 파일이 대신 사용됩니다.

이 과정은 DLL 번들 내의 모든 파일을 해석한 후에 발생하므로, DLL 번들을 사용하는 쪽에서도 동일한 경로를 사용할 수 있어야 합니다. 예를 들어, DLL에 lodash와 abc 파일이 포함되어 있다면, 메인 번들에 해당 파일들을 포함시키는 대신 DLL 자체에서 import _ from "lodash"/require('lodash')와 import abs from "./abc"/require('./abc')를 사용하게 됩니다.

Usage

webpack.vendor.config.js

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

new webpack.DllPlugin({
  context: import.meta.dirname,
  name: "[name]_[fullhash]",
  path: path.join(__dirname, "manifest.json"),
});

webpack.app.config.js

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: path.join(__dirname, "manifest.json"),
  scope: "xyz",
  sourceType: "commonjs2",
});

Examples

Vendor 와 User

두 개의 개별 예제 폴더로, 유효범위와 컨텍스트를 보여줍니다.

References

Source

• DllPlugin source
• DllReferencePlugin source
• DllEntryPlugin source
• DllModuleFactory source
• ManifestPlugin source

Tests

• DllPlugin creation test
• DllPlugin without scope test
• DllReferencePlugin use Dll test