DllPlugin

DLLPluginDLLReferencePlugin 提供了一种可以显著提高构建时性能的方式来拆分包的方法。

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.jsonvendor.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>

外链

webpack plugins dll-plugin

Last Updated: 11/19/2019, 3:37:32 PM