使用DllPlugin

本文共--字 阅读约--分钟 | 浏览: -- Last Updated: 2021-02-26

dll(* Dynamic Link Library *): 动态链接库，在一个动态链接库中可以包含为其他模块调用的函数和数据。

作用是提高构建速度，原因在于包含大量复用模块的动态链接库只需被编译一次，在之后的构建过程中被动态链接库包含的模块将不会重新编译，而是直接使用动态链接库中的代码。由于动态链接库中大多数包含的是常用的第三方模块，例如react 、react-dom ，所以只要不升级这些模块的版本，动态链接库就不用重新编译。

DllPlugin插件，用于打包出一个个单独的动态链接库文件。这个插件会生成一个名为 manifest.json 的文件，这个文件是用来让 DllReferencePlugin插件映射到相关的依赖上去的。

动态链接库文件

一个动态链接库文件中包含了大量模块的代码，这些模块被存放在一个数组里，用数组的索引号作为ID 。并且通过如_dll_react这样的变量将自己暴露在全局中，即可以通过window._dll_react访问到其中包含的模块。

下面的 *.mainfest.json和 *.dll.js中的*均指entry入口名，webpack中可修改相关配置。

*.manifest.json

*.manifest.json 文件也是由DllPlugin生成的，用于描述在动态链接库文件中包含哪些模块，DllReferencePlugin插件通过该文件正确映射，以react.manifest.json文件为例，其文件的内容大致如下

{
  //描述该动态链接库文件暴露在全局中的变量名称
  "name": "_dll_react",
  "content": {
    "./node_modules/process/browser.js":{
      "id": 0,
      "meta":{}
    },
    // ．．．此处省略部分模块

    "./node_modules/react-dom/lib/ReactBrowserEventEmitter.js": {
      "id": 52,
      "meta":{}
    }
  }
}

打包时从入口进入，在遇到其依赖的模块在*.dll.js文件中时，会直接通过*.dll.js文件暴露的全局变量window._dll_reac获取打包在*.dll.js文件中的模块，所以在index.html文件中需要将依赖的*.dll.js文件加载进去。

使用

package.json定义的两个脚本即为使用方法，先执行npm run build:dll进行动态链接库相关文件的编译，然后npm run build，这时候就会发现构建速度大大提升了。

{
  "scripts": {
    "build": "webpack",
    "build:dll": "webpack --config webpack_dll.config.js"
  },
}

配置处理动态库文件的webpack_dll.config

// webpack_dll.config

const path = require('path');
const DllPlugin = require('webpack/lib/DllPlugin');

module.exports = {
  // JS 执行入口文件
  entry: {
    // 把 React 相关的放到一个单独的动态链接库
    react: ['react', 'react-dom'],
    // 把项目需要所有的 polyfill 放到一个单独的动态链接库
    polyfill: ['core-js/fn/object/assign', 'core-js/fn/promise', 'whatwg-fetch'],
  },
  output: {
    // 输出的动态链接库的文件名称，[name] 代表当前动态链接库的名称，也就是 entry 中配置的 react 和 polyfill
    filename: '[name].dll.js',
    // 输出的文件都放到 dist 目录下
    path: path.resolve(__dirname, 'dist'),
    // 存放动态链接库的全局变量名称，例如对应 react 来说就是 _dll_react
    // 之所以在前面加上 _dll_ 是为了防止全局变量冲突
    library: '_dll_[name]',
  },
  plugins: [
    // 接入 DllPlugin
    new DllPlugin({
      // 动态链接库的全局变量名称，需要和 output.library 中保持一致
      // 该字段的值也就是输出的 manifest.json 文件 中 name 字段的值
      // 例如 react.manifest.json 中就有 "name": "_dll_react"
      name: '_dll_[name]',
      // 描述动态链接库的 manifest.json 文件输出时的文件名称
      path: path.join(__dirname, 'dist', '[name].manifest.json'),
    }),
  ],
};

配置webpack.config

// webpack.config.js

const path = require('path');
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');

module.exports = {
  entry: {
    // 定义 入口 Chunk
    main: './main.js'
  },
  output: {
    // 输出文件的名称
    filename: '[name].js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        // 项目源码使用了 ES6 和 JSX 语法，需要使用 babel-loader 转换
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: path.resolve(__dirname, 'node_modules'),
      },
    ]
  },
  plugins: [
    // 告诉 Webpack 使用了哪些动态链接库
    new DllReferencePlugin({
      // 描述 react 动态链接库的文件内容
      manifest: require('./dist/react.manifest.json'),
    }),
    new DllReferencePlugin({
      // 描述 polyfill 动态链接库的文件内容
      manifest: require('./dist/polyfill.manifest.json'),
    }),
  ],
  devtool: 'source-map'
};

引入

在index.html就需要这样引入*.dll.js

<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <div id="app"></div>
    <!--导入依赖的动态链接库文件-->
    <script src="./dist/polyfill.dll.js"></script>
    <script src="./dist/react.dll.js"></script>
    <!--导入执行入口文件-->
    <script src="./dist/main.js"></script>
  </body>
</html>

其中*.dll.js的文件大概是这样，关于 webpackBootstrap函数的代码 可以查看这里。

var _dll_react = (function(modules) {
  // 省略 webpackBootstrap函数的代码
}
(
  [
    function(module, exports, __webpack_require__) {
      // ID为0的模块对应的代码
    },

    function(module, exports, __webpack_require__) {
      // ID为1的模块对应的代码
    }
    
    // ...
  ]

))