面试题：Webpack DllPlugin在大型项目中的优化实践

利用DllPlugin进行更细粒度分包优化步骤

安装DllPlugin：Webpack 自带 DllPlugin 和 DllReferencePlugin，无需额外安装。

配置DllPlugin：

创建一个单独的 Webpack 配置文件，例如 webpack.dll.js。
在 webpack.dll.js 中，配置 entry，将你想要提取到 DLL 中的模块引入，例如：

const path = require('path');
module.exports = {
    entry: {
        vendor: ['react','react - dom']
    },
    output: {
        path: path.resolve(__dirname, 'dll'),
        filename: '[name].dll.js',
        library: '[name]_library'
    },
    plugins: [
        new webpack.DllPlugin({
            path: path.join(__dirname, 'dll', '[name].manifest.json'),
            name: '[name]_library'
        })
    ]
};

上述配置将 react 和 react - dom 提取到 vendor.dll.js 中，并生成 vendor.manifest.json 清单文件。

在主Webpack配置中使用DllReferencePlugin：

在主 webpack.config.js 中，引入 DllReferencePlugin：

const path = require('path');
const webpack = require('webpack');
module.exports = {
    // 其他配置...
    plugins: [
        new webpack.DllReferencePlugin({
            manifest: path.join(__dirname, 'dll','vendor.manifest.json')
        })
    ]
};

这样主构建过程中就会直接引用 DLL 中的模块，不再重复打包。

HTML中引入DLL文件：在 HTML 模板中，通过 <script> 标签引入生成的 DLL 文件，例如：
```
<script src="dll/vendor.dll.js"></script>
```

可能遇到的问题及解决方案

模块版本不一致问题
- 问题描述：当 DLL 中模块版本与项目中实际使用的模块版本不一致时，可能导致运行时错误。
- 解决方案：确保在 webpack.dll.js 中引入的模块版本与项目 package.json 中定义的版本一致，每次更新 package.json 中相关模块版本后，重新构建 DLL。
DLL文件体积过大
- 问题描述：如果 DLL 包含过多模块，可能导致 DLL 文件体积过大，失去分包优化的意义。
- 解决方案：更细粒度地划分 DLL，例如将不同功能的库分别打包到不同的 DLL 中，如将 UI 库、数据请求库等分别打包。
缓存问题
- 问题描述：当 DLL 内容更新后，浏览器可能仍然使用旧的缓存 DLL 文件，导致页面出现错误。
- 解决方案：在 HTML 引入 DLL 文件时，添加版本号或使用 webpack - chunk - hash 等方式生成带 hash 的文件名，如 vendor.[chunkhash].dll.js，这样文件内容变化时，文件名也会变化，浏览器就会重新加载新文件。
Manifest文件丢失或损坏
- 问题描述：如果 manifest.json 文件丢失或损坏，DllReferencePlugin 无法正常工作。
- 解决方案：在构建脚本中添加检查逻辑，确保每次构建 DLL 时，manifest.json 文件正确生成。如果不小心丢失，重新构建 DLL 即可。

星途面试题库

面试题：Webpack DllPlugin在大型项目中的优化实践

知识考点

面试题答案

利用DllPlugin进行更细粒度分包优化步骤

可能遇到的问题及解决方案