面试题：Webpack中DllPlugin提升打包速度的原理是什么

Webpack里DllPlugin提升打包速度的原理

原理概述：
- 预编译：DllPlugin 允许将一些基础库（如 React、Vue 等）预先编译成一个或多个 DLL（动态链接库）文件。这些库在项目开发过程中通常不会频繁变动。
- 映射关系：它会生成一个 manifest 文件，这个文件记录了 DLL 文件中各个模块的映射关系。在实际打包时，Webpack 不再需要重复打包这些基础库，而是通过 manifest 文件去引用已经编译好的 DLL 文件中的模块。
- 减少重复编译：因为基础库只在首次生成 DLL 时编译一次，后续开发过程中只要基础库不改变，就无需再次编译，大大减少了每次打包时的编译工作量，从而提升打包速度。

在实际项目中配置使用DllPlugin

安装依赖：
- 确保已经安装了 Webpack 和 Webpack - CLI，通常在项目根目录下执行 npm install webpack webpack - cli --save - dev。
配置生成 DLL：
- 在项目根目录下创建一个 webpack.dll.js 文件。
- 以下是一个简单的示例配置：

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

module.exports = {
    entry: {
        // 这里指定要打包进 DLL 的库，例如 react 和 react - dom
        vendor: ['react','react - dom']
    },
    output: {
        path: path.resolve(__dirname, 'dll'),
        filename: '[name].dll.js',
        library: '[name]_[hash]'
    },
    plugins: [
        new DllPlugin({
            name: '[name]_[hash]',
            path: path.join(__dirname, 'dll', '[name].manifest.json')
        })
    ]
};

在 package.json 中添加一个脚本用于生成 DLL，例如：

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

执行 npm run dll 命令，会在 dll 目录下生成 vendor.dll.js 和 vendor.manifest.json 文件。

在主 Webpack 配置中使用 DLL：
- 在主 webpack.config.js 文件中引入 DllReferencePlugin。
- 以下是示例配置：

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

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

这样在主项目打包时，Webpack 会通过 DllReferencePlugin 引用已经生成好的 DLL 文件，不再重复打包 react 和 react - dom 等库，从而加快打包速度。同时，在 HTML 中需要手动引入生成的 vendor.dll.js 文件，可以使用 html - webpack - plugin 等插件来自动化这一过程。例如：

const HtmlWebpackPlugin = require('html - webpack - plugin');

module.exports = {
    // 其他配置...
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            inject: 'body',
            // 在 HTML 中注入 vendor.dll.js
            extraChunks: {
                vendor: {
                    test: /vendor\.dll\.js$/,
                    chunks: [],
                    priority: -10
                }
            }
        }),
        new DllReferencePlugin({
            context: __dirname,
            manifest: require('./dll/vendor.manifest.json')
        })
    ]
};

星途面试题库

面试题：Webpack中DllPlugin提升打包速度的原理是什么

知识考点

面试题答案

Webpack里DllPlugin提升打包速度的原理

在实际项目中配置使用DllPlugin