如何在项目中使用与构建DLLwebpack.dll.js 文件是 Webpack 的动态链接库（DLL）配置文件，它的核

webpack.dll.js 文件是 Webpack 的动态链接库（DLL）配置文件，它的核心作用是通过预编译第三方库（如 vue、axios 等）生成一个独立的 vendor.dll.js 文件，并附带一个清单文件（manifest.json），从而显著提升项目的构建速度和开发体验。

1. 如何生成 `webpack.dll.js` 文件？

webpack.dll.js 文件需要手动创建并配置，它是一个一次性的模板化配置，通常只需编写一次即可长期使用。以下是具体步骤和详细说明：

（1）手动创建配置文件

在项目根目录下新建 webpack.dll.js 文件，配置示例：

const path = require("path");
const webpack = require("webpack");
const dllPath = 'public/vendor'; // 输出目录

module.exports = {
  mode: 'production', // 生产环境模式
  entry: {
    vendor: ['vue', 'vue-router', 'axios', 'echarts'] // 要预编译的第三方库
  },
  output: {
    path: path.resolve(__dirname, dllPath), // 生成的 `vendor.dll.js` 文件存放目录
    filename: '[name].dll.js', // 输出文件名，对应 entry中的键（如 vendor.dll.js）
    library: '[name]_[hash]' // 全局变量名（如 vendor_abc123），暴露为全局，供后续主构建引用
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, dllPath, "[name].manifest.json"), // 清单文件路径，记录模块的映射关系
      name: '[name]_[hash]', // 必须与 output.library 一致，用于全局变量名匹配
      context: process.cwd() // 上下文路径（默认为process.cwd()），需与主构建配置一致，否则会找不到模块
    })
  ]
};

（2）运行 Webpack 生成 DLL 文件

方法一：

在 package.json 中添加一个脚本命令：

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

然后执行：

npm run build:dll

方法二：

直接运行

// bash
webpack --config webpack.dll.js

生成的 vendor.dll.js 包含所有指定的第三方库代码。

生成的文件会输出到 public/vendor 目录：

vendor.dll.js：预编译的第三方库代码。
vendor.manifest.json：模块映射清单。

2. 关键注意事项

（1）手动维护依赖列表

如果后续新增了第三方库（例如新增了 lodash），需要修改 entry.vendor 数组，重新运行 build:dll。

示例：

entry: {
  vendor: ['vue', 'vue-router', 'axios', 'echarts', 'lodash'] // 新增 lodash
}

（2）与主 Webpack 配置关联

在主配置文件（如 webpack.config.js）中通过 DllReferencePlugin 引用生成的清单文件：

plugins: [
  new webpack.DllReferencePlugin({
    context: process.cwd(),
    manifest: require('./public/vendor/vendor.manifest.json')
  })
]

或者在（如 vue.config.js）中进行配置

configureWebpack: {
    plugins: [
      new webpack.DllReferencePlugin({
        context: process.cwd(),
        manifest: require("./public/vendor/vendor.manifest.json"),
      }),
    ]
  }

这样主构建会跳过已预编译的第三方库，直接引用 vendor.dll.js。

（3）HTML 中手动引入 DLL 文件

在 index.html 中通过 <script> 标签引入预构建的 DLL 文件：

<script src="./vendor/vendor.dll.js"></script>

3. 自动化工具辅助

虽然配置文件是手动编写的，但可以通过工具简化流程：

（1）使用 `add-asset-html-webpack-plugin`

自动将 vendor.dll.js 插入 HTML：

const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');

plugins: [
  new AddAssetHtmlPlugin({
    filepath: path.resolve(__dirname, 'public/vendor/vendor.dll.js')
  })
]

（2）监听依赖变化（可选）

通过 npm hooks 在安装依赖后自动重建 DLL：

{
  "scripts": {
    "postinstall": "npm run build:dll"
  }
}

4、为什么需要它？

优势

大幅提升构建速度：
第三方库只需编译一次，后续开发时主构建跳过这些库，尤其适合大型项目。
长期缓存：
vendor.dll.js 的文件名包含哈希，内容不变时缓存可长期有效。

缺点

配置复杂：需维护单独的 DLL 配置和构建脚本。
灵活性低：依赖变更时需手动重新生成 DLL 文件。
现代替代方案：Webpack 5 已推荐使用 splitChunks 或 cacheGroups 替代 DLL。

5、适用场景

传统大型项目：依赖稳定且极少变更。
需要极致优化开发构建速度：如企业级后台管理系统。

6、总结

手动编写 webpack.dll.js 文件，定义要预编译的库。
运行命令生成 vendor.dll.js 和清单文件。
主配置中引用清单文件，并在 HTML 中加载 DLL。
维护成本：依赖变更时需重新生成 DLL。

如何在项目中使用与构建DLL

1. 如何生成 webpack.dll.js 文件？