DllPlugin 插件

webpackjsorg-main插件参考

DllPlugin 插件

DllPlugin 和 DllReferencePlugin 提供了一种拆分 bundle 的方式，可以显著改善构建性能。术语 "DLL" 代表动态链接库（Dynamic-link library），最初由 Microsoft 引入。

DllPlugin

此插件在单独的 webpack 配置中使用，专门用于创建仅包含 dll 的 bundle（dll-only-bundle）。它会创建一个 manifest.json 文件，供 DllReferencePlugin 用于映射依赖。

context（可选）：manifest 文件中请求的 context（默认为 webpack 的 context）。
format（boolean = false）：如果为 true，manifest JSON 文件（输出）将被格式化。
name：对外暴露的 dll 函数的名称（TemplatePaths：[fullhash]、[chunkhash]、[contenthash] 和 [name]）。
path：manifest JSON 文件（输出）的绝对路径。
entryOnly（boolean = true）：如果为 true，则仅暴露入口点。
type：dll bundle 的类型。

js 复制代码

new webpack.DllPlugin(options);

警告： 当 webpack 输出使用代码分离时，我们应该在 path 中使用模板字符串，以确保 webpack 生成多个 manifest 文件。

警告： 我们建议仅在 entryOnly: true 时使用 DllPlugin，否则 DLL 中的 tree shaking 无法正常工作，因为所有导出都可能被使用。

创建一个 manifest.json，并写入到给定的 path。它包含从 require 和 import 请求到模块 id 的映射，供 DllReferencePlugin 使用。

将此插件与 output.library 选项结合使用，以暴露（即放入全局作用域）dll 函数。

DllReferencePlugin

此插件用于主 webpack 配置中，它引用 dll-only-bundle(s) 来 require 预构建的依赖。

context：（绝对路径）manifest（或 content 属性）中请求的 context。
extensions：用于解析 dll bundle 中模块的扩展名（仅在使用 'scope' 时使用）。
manifest：一个包含 content 和 name 的对象，或指向编译时要加载的 JSON manifest 的绝对路径的字符串。
content（可选）：从请求到模块 id 的映射（默认为 manifest.content）。
name（可选）：dll 被暴露处的标识符（默认为 manifest.name）（另请参阅 externals）。
scope（可选）：用于访问 dll 内容的前缀。
sourceType（可选）：dll 的暴露方式（libraryTarget）。

js 复制代码

new webpack.DllReferencePlugin(options);

引用一个 dll manifest 文件，将依赖名称映射到模块 id，然后在需要时使用内部的 __webpack_require__ 函数按需 require 它们。

警告： 使 name 与 output.library 保持一致。

模式

此插件可以在两种不同的模式下使用：scoped（作用域）模式和 mapped（映射）模式。

Scoped 模式（作用域模式）

dll 的内容在模块前缀下可访问。即，当 scope = 'xyz' 时，dll 中的文件 abc 可以通过 require('xyz/abc') 访问。

提示： 查看使用 scope 的示例

Mapped 模式（映射模式）

dll 的内容被映射到当前目录。如果某个被 require 的文件（在解析后）与 dll 中的文件匹配，则改用 dll 中的文件。

由于这发生在解析 dll bundle 中每个文件之后，因此 dll bundle 的使用者必须能够访问相同的路径。即，如果 dll 包含 lodash 和文件 abc，那么 import _ from "lodash" / require('lodash') 以及 import abs from "./abc" / require('./abc') 将使用 dll 中的版本，而不是将它们构建到主 bundle 中。

用法

警告： DllReferencePlugin 和 DllPlugin 在_单独的_ webpack 配置中使用。

webpack.vendor.config.js

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

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",
});

示例

Vendor 和 User

两个独立的示例文件夹。演示了 scope 和 context。

提示： 可以使用多个 DllPlugin 和多个 DllReferencePlugin。

参考

源码

测试

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。