DllPlugin
The DllPlugin
and DllReferencePlugin
provide means to split bundles in a way that can drastically improve build time performance.
DllPlugin
This plugin is used in a separate webpack config exclusively to create a dll-only-bundle. It creates a manifest.json
file, which is used by the DllReferencePlugin
to map dependencies.
context
(optional): context of requests in the manifest file (defaults to the webpack context.)name
: name of the exposed dll function (TemplatePaths:[hash]
&[name]
)path
: absolute path to the manifest json file (output)
new webpack.DllPlugin(options)
Creates a manifest.json
which is written to the given path
. It contains mappings from require and import requests, to module ids. It is used by the DllReferencePlugin
.
Combine this plugin with output.library
option to expose (aka, put into the global scope) the dll function.
DllReferencePlugin
This plugin is used in the primary webpack config, it references the dll-only-bundle(s) to require pre-built dependencies.
context
: (absolute path) context of requests in the manifest (or content property)manifest
(object): an object containingcontent
andname
content
(optional): the mappings from request to module id (defaults tomanifest.content
)name
(optional): the name where the dll is exposed (defaults tomanifest.name
) (see alsoexternals
)scope
(optional): prefix which is used for accessing the content of the dllsourceType
(optional): how the dll is exposed (libraryTarget)
new webpack.DllReferencePlugin(options)
References a dll manifest file to map dependency names to module ids, then requires them as needed using the internal __webpack_require__
function.
Keep the
name
consistent withoutput.library
.
Modes
This plugin can be used in two different modes, scoped and mapped.
Scoped Mode
The content of the dll is accessible under a module prefix. i.e. with scope = "xyz"
a file abc
in the dll can be access via require("xyz/abc")
.
Mapped Mode
The content of the dll is mapped to the current directory. If a required file matches a file in the dll (after resolving), then the file from the dll is used instead.
Because this happens after resolving every file in the dll bundle, the same paths must be available for the consumer of the dll bundle. i.e. if the dll contains lodash
and the file abc
, require("lodash")
and require("./abc")
will be used from the dll, rather than building them into the main bundle.
Usage
DllReferencePlugin
andDllPlugin
are used in separate webpack configs.
webpack.vendor.config.js
new webpack.DllPlugin({
context: __dirname,
name: "[name]_[hash]",
path: path.join(__dirname, "manifest.json"),
})
webpack.app.config.js
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require("./manifest.json"),
name: "./my-dll.js",
scope: "xyz",
sourceType: "commonsjs2"
})
Examples
Two separate example folders. Demonstrates scope and context.
Multiple
DllPlugins
and multipleDllReferencePlugins
.
References
Source
- DllPlugin source
- DllReferencePlugin source
- DllEntryPlugin source
- DllModuleFactory source
- ManifestPlugin source