服务端

Node.js 中的 `DllPlugin` 及相关的 `DllReferencePlugin` 主要是用于改善构建时间和实现代码分离，在 Webpack 构建过程中使用。`DllPlugin` 用来打包出一个个独立的动态链接库文件，而 `DllReferencePlugin` 则用于在主应用程序中引用这些动态链接库。

以下是使用 `DllPlugin` 的具体步骤：

### 步骤 1: 创建 DLL 文件

首先，你需要在项目中创建一个 webpack 配置文件专门用于构建 DLL。

```javascript
// webpack.dll.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    vendor: ['lodash', 'react'] // 假设我们希望将 lodash 和 react 打包成一个 DLL
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].dll.js', // 输出的文件名
    library: '[name]_library' // 全局变量名，其他模块会从此变量上获取到里面的模块
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, 'dist', '[name]-manifest.json'),
      name: '[name]_library'
    })
  ]
};
```

这个配置会将 `lodash` 和 `react` 打包成一个名为 `vendor.dll.js` 的文件，并生成一个 `vendor-manifest.json` 文件。

### 步骤 2: 在主配置中引用 DLL

然后，在你的主 `webpack` 配置文件中，你需要使用 `DllReferencePlugin` 来引用上一步中生成的 `vendor-manifest.json` 文件。

```javascript
// webpack.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
  // ...你的其他配置
  plugins: [
    // ...你的其他插件
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./dist/vendor-manifest.json') // 引入 DLL 的 manifest 文件
    })
  ],
  // ...其余配置
};
```

### 步骤 3: 在 HTML 中引入 DLL 文件

最后，你需要确保在应用程序加载前，先在 HTML 文件中引入这些 DLL 文件。例如：

```html
<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <script src="./dist/vendor.dll.js"></script>
  
</body>
</html>
```

### 使用例子

假设你有一个大型项目，每次构建都需要很长时间，因为第三方库例如 `React`、`Vue` 或 `Lodash` 并不经常更改，但它们每次都会被重新编译。通过使用 DLL，你可以将这些库预编译成静态资源，以便在开发过程中重复使用，从而减少了构建时需要处理的工作量，并加快了构建速度。

使用 DLL 时需要注意的是，当你更新了 DLL 中的依赖项时，你需要重新构建 DLL 文件。同时，应当确保在生产环境构建中不包含 DLL 的引用，或者确保 DLL 是最新的，以避免因为版本不一致带来的问题。

总的来说，`DllPlugin` 提高了开发效率，尤其是在大型项目和频繁构建的环境中，它可以显著减少构建时间并提升开发体验。

nodejs 如何使用 DllPlugin 动态链接库？

步骤 1: 创建 DLL 文件

步骤 2: 在主配置中引用 DLL

步骤 3: 在 HTML 中引入 DLL 文件

使用例子