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 파일이 있으면 require('lodash') 및require('./abc') 가 메인 번들로 빌드되지 않고 dll에서 사용됩니다.
Usage
webpack.vendor.config.js
const path = require('path');
new webpack.DllPlugin({
context: __dirname,
name: '[name]_[fullhash]',
path: path.join(__dirname, 'manifest.json'),
});webpack.app.config.js
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./manifest.json'),
scope: 'xyz',
sourceType: 'commonjs2',
});Examples
두 개의 개별 예제 폴더로, 유효범위와 컨텍스트를 보여줍니다.
References
Source
- DllPlugin source
- DllReferencePlugin source
- DllEntryPlugin source
- DllModuleFactory source
- ManifestPlugin source
Tests
Further Reading
9 Contributors
