DllPlugin

2023-06-02 14:43 更新

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）。

DllPlugin

DllPlugin

DllReferencePlugin

模式(Modes)

Scoped Mode

Mapped Mode

用法(Usage)

示例

参考

Source

Tests

Further Reading