前端架构师成长计划

1. 什么是DLL #

DllPlugin和DllReferencePlugin提供了拆分包的方法，可以极大地提高构建时性能。术语DLL代表动态链接库，它最初是由Microsoft引入的。
.dll为后缀的文件称为动态链接库，在一个动态链接库中可以包含给其他模块调用的函数和数据
把基础模块独立出来打包到单独的动态连接库里
当需要导入的模块在动态连接库里的时候，模块不能再次被打包，而是去动态连接库里获取

1.1 DllPlugin #

1.2 DllReferencePlugin #

1.3 WebpackClassDiagram #

2. 使用DLL #

2.1 安装依赖 #

cnpm i webpack webpack-cli html-webpack-plugin isarray is-promise -D

2.2 定义Dll #

dll-plugin
DllPlugin插件：用于打包出一个个动态连接库
DllReferencePlugin: 在配置文件中引入DllPlugin插件打包好的动态连接库

webpack.dll.config.js

const path = require("path");
const DllPlugin = require("webpack/lib/DllPlugin");
const DllPlugin2 = require("./plugins/DllPlugin");
module.exports = {
  mode: "development",
  devtool: false,
  entry: {
    utils:["isarray","is-promise"]
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "utils.dll.js", //react.dll.js
    library: "_dll_utils",
  },
  plugins: [
    new DllPlugin2({
      //暴露出去的dll函数
      name: "_dll_utils",
      //输出的manifest json文件的绝对路径
      path: path.join(__dirname, "dist", "utils.manifest.json")
    }),
  ],
};

2.3 使用动态链接库文件 #

webpack.config.js

const path = require("path");
const DllReferencePlugin = require("webpack/lib/DllReferencePlugin.js");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: "development",
  devtool: false,
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new DllReferencePlugin({
      manifest: require("./dist/utils.manifest.json"),
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
};

2.4 html中使用 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dll</title>
</head>
<body>
    <div id="root"></div>
    <script src="utils.dll.js"></script>
</body>
</html>

2.5 index.js #

src\index.js

let isarray = require("isarray");
console.log('isarray([1, 2, 3])=',isarray([1, 2, 3]));

2.6 package.json #

package.json

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

2.7 dll.js #

const webpack = require("webpack");
const webpackOptions = require("./webpack.dll.config");
const compiler = webpack(webpackOptions);
debugger
compiler.run((err, stats) => {
  console.log(
    stats.toJson({})
  );
});

2.8 build.js #

const webpack = require("webpack");
const webpackOptions = require("./webpack.config");
const compiler = webpack(webpackOptions);
compiler.run((err, stats) => {
  console.log(
    stats.toJson({})
  );
});

3.打包文件分析 #

3.1 index.html #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dll</title>
</head>
<body>
    <div id="root"></div>
    <script src="utils.dll.js"></script>
    <script src="bundle.js"></script></body>
</html>

3.2 utils.dll.js #

dist\utils.dll.js

var _dll_utils =
  (function (modules) {
    var installedModules = {};
    function __webpack_require__(moduleId) {
      if (installedModules[moduleId]) {
        return installedModules[moduleId].exports;
      }
      var module = installedModules[moduleId] = {
        i: moduleId,
        l: false,
        exports: {}
      };
      modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
      module.l = true;
      return module.exports;
    }
    return __webpack_require__(__webpack_require__.s = 0);
  })
    ({
      "./node_modules/_is-promise@4.0.0@is-promise/index.js":
        (function (module, exports) {
          module.exports = isPromise;
          module.exports.default = isPromise;
          function isPromise(obj) {
            return !!obj && (typeof obj === 'object' || typeof obj === 'function') && typeof obj.then === 'function';
          }
        }),
      "./node_modules/_isarray@2.0.5@isarray/index.js":
        (function (module, exports) {
          var toString = {}.toString;
          module.exports = Array.isArray || function (arr) {
            return toString.call(arr) == '[object Array]';
          };
        }),
      0:
        (function (module, exports, __webpack_require__) {
          module.exports = __webpack_require__;
        })
    });

3.3 utils.manifest.json #

dist\utils.manifest.json

{
  "name": "_dll_utils",
  "content": {
    "./node_modules/_is-promise@4.0.0@is-promise/index.js": {
      "id": "./node_modules/_is-promise@4.0.0@is-promise/index.js",
      "buildMeta": { "providedExports": true }
    },
    "./node_modules/_isarray@2.0.5@isarray/index.js": {
      "id": "./node_modules/_isarray@2.0.5@isarray/index.js",
      "buildMeta": {
        "providedExports": true
      }
    }
  }
}

3.4 bundle.js #

dist\bundle.js

(function (modules) {
  var installedModules = {};
  function __webpack_require__(moduleId) {
    if (installedModules[moduleId]) {
      return installedModules[moduleId].exports;
    }
    var module = installedModules[moduleId] = {
      i: moduleId,
      l: false,
      exports: {}
    };
    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    module.l = true;
    return module.exports;
  }
  return __webpack_require__(__webpack_require__.s = "./src/index.js");
})
  ({
    "./node_modules/_isarray@2.0.5@isarray/index.js":
      (function (module, exports, __webpack_require__) {
        module.exports = (__webpack_require__("dll-reference _dll_utils"))("./node_modules/_isarray@2.0.5@isarray/index.js");
      }),
    "./src/index.js":
      (function (module, exports, __webpack_require__) {
        let isarray = __webpack_require__("./node_modules/_isarray@2.0.5@isarray/index.js");
        console.log('isarray([1, 2, 3])=', isarray([1, 2, 3]));
      }),
    "dll-reference _dll_utils":
      (function (module, exports) {
        module.exports = _dll_utils;
      })
  });

4.实现DllPlugin.js #

4.1 DllPlugin.js #

plugins\DllPlugin.js

const DllEntryPlugin = require("./DllEntryPlugin");
class DllPlugin {
    constructor(options) {
        this.options = options;
    }
    apply(compiler) {
        compiler.hooks.entryOption.tap("DllPlugin", (context, entry) => {
            Object.keys(entry).forEach(name => {
                new DllEntryPlugin(context, entry[name],name).apply(compiler);
            });
            return true;
        });
    }
}
module.exports = DllPlugin;

4.2 DllEntryPlugin.js #

plugins\DllEntryPlugin.js

const SingleEntryDependency = require("webpack/lib/dependencies/SingleEntryDependency");
const DllEntryDependency = require("./dependencies/DllEntryDependency");
const DllModuleFactory = require("./DllModuleFactory");
class DllEntryPlugin {
    constructor(context, entries, name) {
        this.context = context;// c:/aprepare/zhufeng_dll_prepare
        this.entries = entries;// ['isarray', 'is-promise']
        this.name = name; // utils
    }
    apply(compiler) {
        compiler.hooks.compilation.tap(
            "DllEntryPlugin",
            (compilation, { normalModuleFactory }) => {
                const dllModuleFactory = new DllModuleFactory();
                compilation.dependencyFactories.set(
                    DllEntryDependency,
                    dllModuleFactory
                );
                compilation.dependencyFactories.set(
                    SingleEntryDependency,
                    normalModuleFactory
                );
            }
        );
        compiler.hooks.make.tapAsync("DllEntryPlugin", (compilation, callback) => {
            compilation.addEntry(
                this.context,
                new DllEntryDependency(
                    this.entries.map((entry) => new SingleEntryDependency(entry)),
                    this.name//utils
                ),
                this.name,//utils
                callback
            );
        });
    }
}
module.exports = DllEntryPlugin;

4.3 DllModuleFactory.js #

plugins\DllModuleFactory.js

const { Tapable } = require("tapable");
const DllModule = require("./DllModule");
class DllModuleFactory extends Tapable {
    constructor() {
        super();
        this.hooks = {};
    }
    create(data, callback) {
        const dependency = data.dependencies[0];
        callback(
            null,
            new DllModule(
                data.context,
                dependency.dependencies,// [SingleEntryDependency, SingleEntryDependency]
                dependency.name,//utils
                dependency.type//'dll entry'
            )
        );
    }
}
module.exports = DllModuleFactory;

4.4 DllEntryDependency.js #

plugins\dependencies\DllEntryDependency.js

const Dependency = require("webpack/lib/Dependency");
class DllEntryDependency extends Dependency {
    constructor(dependencies, name) {
        super();
        this.dependencies = dependencies;//[SingleEntryDependency,SingleEntryDependency ]
        this.name = name;//utils
    }
    get type() {
        return "dll entry";
    }
}
module.exports = DllEntryDependency;

4.5 DllModule.js #

plugins\DllModule.js

const { RawSource } = require("webpack-sources");
const Module = require("webpack/lib/Module");
class DllModule extends Module {
    constructor(context, dependencies, name, type) {
        super("javascript/dynamic", context);//c:/aprepare/zhufeng_dll_prepare2
        this.dependencies = dependencies;
        this.name = name;//utils
        this.type = type;//dll entry
    }
    identifier() {
        return `dll ${this.name}`;
    }
    readableIdentifier() {
        return `dll ${this.name}`;
    }
    build(options, compilation, resolver, fs, callback) {
        this.built = true;
        this.buildMeta = {};
        this.buildInfo = {};
        return callback();
    }
    source() {
        return new RawSource("module.exports = __webpack_require__;");
    }
    size() {
        return 12;
    }
}
module.exports = DllModule;

5.实现LibManifestPlugin.js #

5.1 LibManifestPlugin.js #

plugins\LibManifestPlugin.js

const path = require("path");
const asyncLib = require("neo-async");
class LibManifestPlugin {
    constructor(options) {
        this.options = options;
    }
    apply(compiler) {
        compiler.hooks.emit.tapAsync(
            "LibManifestPlugin",
            (compilation, callback) => {
                asyncLib.forEach(
                    compilation.chunks,
                    (chunk, done) => {
                        // c:aprepare/zhufeng_dll_prepare/dist/utils.manifest.json
                        const targetPath = this.options.path;
                        const name =this.options.name;//_dll_utils
                        let content ={};
                        for(let module of chunk.modulesIterable){
                            if (module.libIdent) {
                                const ident = module.libIdent({context:compiler.options.context});
                                content[ident]= {id: module.id};
                            }
                        }
                        const manifest = {name,content};//name=_dll_utils
                        compiler.outputFileSystem.mkdirp(path.dirname(targetPath), err => {
                            compiler.outputFileSystem.writeFile(
                                targetPath,
                                JSON.stringify(manifest),
                                done
                            );
                        });
                    },
                    callback
                );
            }
        );
    }
}
module.exports = LibManifestPlugin;

5.2 DllPlugin.js #