DllPlugin
DLLPlugin
和 DLLReferencePlugin
提供了一种可以显著提高构建时性能的方式来拆分包的方法。
DllPlugin
这个插件是在一个额外的独立的 webpack
设置中创建一个只有 dll
的 bundle(dll-only-bundle)。 这个插件会生成一个名为 manifest.json
的文件,这个文件是用来让 DLLReferencePlugin
映射到相关的依赖上去的。
- context (optional): manifest 文件中请求的上下文(context)(默认值为 webpack 的上下文(context))
- name: 暴露出的 DLL 的函数名 (TemplatePaths: [hash] & [name] )
- path: manifest.json 文件的绝对路径 (输出文件)
new webpack.DllPlugin(options)
在给定的 path
路径下创建一个名为 manifest.json
的文件。 这个文件包含了从 require 和 import 的request到模块 id 的映射。 DLLReferencePlugin 也会用到这个文件。
这个插件与 output.library 的选项相结合可以暴露出 (也叫做放入全局域) dll 函数。
DllReferencePlugin
个插件是在 webpack 主配置文件中设置,把只有 dll 的 bundle (dll-only-bundle(s)) 引用到需要的预编译的依赖。
- context: (绝对路径) manifest (或者是内容属性)中请求的上下文
- manifest: 包含 content 和 name 的对象,或者在编译时(compilation)的一个用于加载的 JSON manifest 绝对路径
- content (optional): 请求到模块 id 的映射 (默认值为 manifest.content)
- name (optional): dll 暴露的地方的名称 (默认值为 manifest.name) (可参考 externals)
- scope (optional): dll 中内容的前缀
- sourceType (optional): dll 是如何暴露的 (libraryTarget)
new webpack.DllReferencePlugin(options)
通过引用 dll 的 manifest 文件来把依赖的名称映射到模块的 id 上,之后再在需要的时候通过内置的 webpack_require 函数来 require 他们
与 output.library 保持 name 的一致性。
使用
5步配置 DllPlugin
第一步
创建 build 文件
// build/webpack.dll.config.js
var path = require("path");
var webpack = require("webpack");
module.exports = {
// 要打包的模块的数组
entry: {
vendor: ['vue/dist/vue.esm.js','vue-router']
},
output: {
path: path.join(__dirname, '../static/js'), // 打包后文件输出的位置
filename: '[name].dll.js',// vendor.dll.js中暴露出的全局变量名。
library: '[name]_library' // 与webpack.DllPlugin中的`name: '[name]_library',`保持一致。
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '.', '[name]-manifest.json'),
name: '[name]_library',
context: __dirname
}),
]
};
第二步
在 package.json 的 scripts 里添加命令
"dll": "webpack --config build/webpack.dll.config.js"
第三步
执行命令,生成 manifest.json
和 vendor.dll.js
文件。
$ npm run dll
第四步
在 webpack.base.conf.js 添加上 DllReferencePlugin
// build/webpack.base.config.js
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./vendor-manifest.json')
})
],
第五步
在 index.html 中引入 vendor.dll.js
<!-- index.html -->
<div id="app"></div>
<script src="./static/js/vendor.dll.js"></script>