DllPlugin

?DllPlugin? 和 ?DllReferencePlugin? 用某種方法實(shí)現(xiàn)了拆分 bundles，同時(shí)還大幅度提升了構(gòu)建的速度。"DLL" 一詞代表微軟最初引入的動(dòng)態(tài)鏈接庫(kù)。

DllPlugin

此插件用于在單獨(dú)的 webpack 配置中創(chuàng)建一個(gè) dll-only-bundle。 此插件會(huì)生成一個(gè)名為 ?manifest.json? 的文件，這個(gè)文件是用于讓 ?DllReferencePlugin? 能夠映射到相應(yīng)的依賴上。

• ?context?（可選）： manifest 文件中請(qǐng)求的 context (默認(rèn)值為 webpack 的 context)
• ?format? (boolean = false)：如果為 ?true?，則 manifest json 文件 (輸出文件) 將被格式化。
• ?name?：暴露出的 DLL 的函數(shù)名（TemplatePaths：?[fullhash] & [name]? ）
• ?path?：manifest.json 文件的 絕對(duì)路徑（輸出文件）
• ?entryOnly? (boolean = true)：如果為 ?true?，則僅暴露入口
• ?type?：dll bundle 的類型

new webpack.DllPlugin(options);

在給定的 ?path? 路徑下創(chuàng)建一個(gè) ?manifest.json? 文件。這個(gè)文件包含了從 require 和 import 中 request 到模塊 id 的映射。 ?DllReferencePlugin? 也會(huì)用到這個(gè)文件。

此插件與 ?output.library? 的選項(xiàng)相結(jié)合可以暴露出（也稱為放入全局作用域）dll 函數(shù)。

DllReferencePlugin

此插件配置在 webpack 的主配置文件中，此插件會(huì)把 dll-only-bundles 引用到需要的預(yù)編譯的依賴中。

• ?context?：（絕對(duì)路徑） manifest (或者是內(nèi)容屬性)中請(qǐng)求的上下文
• ?extensions?：用于解析 dll bundle 中模塊的擴(kuò)展名 (僅在使用 'scope' 時(shí)使用)。
• ?manifest? ：包含 ?content? 和 ?name? 的對(duì)象，或者是一個(gè)字符串 —— 編譯時(shí)用于加載 JSON manifest 的絕對(duì)路徑
• ?content? (可選)： 請(qǐng)求到模塊 id 的映射（默認(rèn)值為 ?manifest.content?）
• ?name? (可選)：dll 暴露地方的名稱（默認(rèn)值為 ?manifest.name?）（可參考externals）
• ?scope? (可選)：dll 中內(nèi)容的前綴
• ?sourceType? (可選)：dll 是如何暴露的

new webpack.DllReferencePlugin(options);

通過(guò)引用 dll 的 manifest 文件來(lái)把依賴的名稱映射到模塊的 id 上，之后再在需要的時(shí)候通過(guò)內(nèi)置的 __webpack_require__ 函數(shù)來(lái) require 對(duì)應(yīng)的模塊

模式(Modes)

這個(gè)插件支持兩種模式，分別是作用域（scoped）和映射（mapped）。

Scoped Mode

dll 中的內(nèi)容可以使用模塊前綴的方式引用，舉例來(lái)說(shuō)，設(shè)置 ?scope = 'xyz'?，這個(gè) dll 中的名為 ?abc? 的文件可以通過(guò) ?require('xyz/abc'?) 來(lái)獲取。

Mapped Mode

dll 中的內(nèi)容會(huì)被映射到當(dāng)前目錄下。如果被 ?require? 的文件與 dll 中的某個(gè)文件匹配（解析之后），那么這個(gè) dll 中的文件就會(huì)被使用。

由于這是在解析了 dll 中每個(gè)文件之后才觸發(fā)的，因此相同的路徑必須能夠確保這個(gè) dll bundle 的使用者（不一定是人，可指某些代碼）有權(quán)限訪問(wèn)。 舉例來(lái)說(shuō)， 假如一個(gè) dll bundle 中含有 ?loadash? 庫(kù)以及文件 ?abc?， 那么 ?require("lodash")? 和 ?require("./abc")?都不會(huì)被編譯進(jìn)主 bundle 文件中，而是會(huì)被 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

兩個(gè)單獨(dú)的用例，用來(lái)分別演示作用域（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