DllPlugin

​DllPlugin​ 和 ​DllReferencePlugin​ 用某种方法实现了拆分 bundles，同时还大幅度提升了构建的速度。"DLL" 一词代表微软最初引入的动态链接库。

DllPlugin

此插件用于在单独的 webpack 配置中创建一个 dll-only-bundle。 此插件会生成一个名为 ​manifest.json​ 的文件，这个文件是用于让 ​DllReferencePlugin​ 能够映射到相应的依赖上。

• ​context​（可选）： manifest 文件中请求的 context (默认值为 webpack 的 context)
• ​format​ (boolean = false)：如果为 ​true​，则 manifest json 文件 (输出文件) 将被格式化。
• ​name​：暴露出的 DLL 的函数名（TemplatePaths：​[fullhash] & [name]​ ）
• ​path​：manifest.json 文件的 绝对路径（输出文件）
• ​entryOnly​ (boolean = true)：如果为 ​true​，则仅暴露入口
• ​type​：dll bundle 的类型

new webpack.DllPlugin(options);

在给定的 ​path​ 路径下创建一个 ​manifest.json​ 文件。这个文件包含了从 require 和 import 中 request 到模块 id 的映射。 ​DllReferencePlugin​ 也会用到这个文件。

此插件与 ​output.library​ 的选项相结合可以暴露出（也称为放入全局作用域）dll 函数。

DllReferencePlugin

此插件配置在 webpack 的主配置文件中，此插件会把 dll-only-bundles 引用到需要的预编译的依赖中。

• ​context​：（绝对路径） manifest (或者是内容属性)中请求的上下文
• ​extensions​：用于解析 dll bundle 中模块的扩展名 (仅在使用 'scope' 时使用)。
• ​manifest​ ：包含 ​content​ 和 ​name​ 的对象，或者是一个字符串 —— 编译时用于加载 JSON manifest 的绝对路径
• ​content​ (可选)： 请求到模块 id 的映射（默认值为 ​manifest.content​）
• ​name​ (可选)：dll 暴露地方的名称（默认值为 ​manifest.name​）（可参考externals）
• ​scope​ (可选)：dll 中内容的前缀
• ​sourceType​ (可选)：dll 是如何暴露的

new webpack.DllReferencePlugin(options);

通过引用 dll 的 manifest 文件来把依赖的名称映射到模块的 id 上，之后再在需要的时候通过内置的 __webpack_require__ 函数来 require 对应的模块

模式(Modes)

这个插件支持两种模式，分别是作用域（scoped）和映射（mapped）。

Scoped Mode

dll 中的内容可以使用模块前缀的方式引用，举例来说，设置 ​scope = 'xyz'​，这个 dll 中的名为 ​abc​ 的文件可以通过 ​require('xyz/abc'​) 来获取。

Mapped Mode

dll 中的内容会被映射到当前目录下。如果被 ​require​ 的文件与 dll 中的某个文件匹配（解析之后），那么这个 dll 中的文件就会被使用。

由于这是在解析了 dll 中每个文件之后才触发的，因此相同的路径必须能够确保这个 dll bundle 的使用者（不一定是人，可指某些代码）有权限访问。 举例来说， 假如一个 dll bundle 中含有 ​loadash​ 库以及文件 ​abc​， 那么 ​require("lodash")​ 和 ​require("./abc")​都不会被编译进主 bundle 文件中，而是会被 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',
});

示例

Vendor 和 User

两个单独的用例，用来分别演示作用域（scope）和上下文（context）。

参考

Source

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

Tests

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

Further Reading

• Code Splitting Example