面试题：Webpack 中如何优化第三方库的打包与加载

externals

适用场景：
- 当项目部署到的环境中，某些第三方库已经通过 CDN 等方式全局引入时，不需要 Webpack 再将这些库打包进项目中。例如，在公司内部的前端项目中，可能会在公共的 HTML 模板中通过 CDN 引入 React 和 React - DOM，各个子项目就可以使用 externals 来避免重复打包。
- 对于一些体积较大且不经常变动的第三方库，将其排除在打包范围外，可显著减小打包后的文件体积，提高构建速度。
配置方法：在 Webpack 配置文件（通常是 webpack.config.js）中进行如下配置：

module.exports = {
    //...其他配置
    externals: {
        // 对于 React 库
        'react': 'React',
        // 对于 lodash 库
        'lodash': '_'
    }
};

这里的键是库在 import 或 require 时使用的名称，值是在全局环境中访问该库时使用的变量名。例如，CDN 引入 React 时，全局变量是 React，引入 lodash 时，全局变量是 _。

DLLPlugin 和 DLLReferencePlugin

适用场景：
- 适用于大型项目中第三方库更新频率较低，而业务代码更新频繁的情况。通过将第三方库单独打包成 DLL（动态链接库），可以在业务代码更新时，避免重复打包第三方库，从而提高构建速度。
- 例如，一个电商项目中，使用的 React、Redux、lodash 等第三方库版本稳定，不会经常变动，而业务组件和逻辑会不断更新迭代，这种场景下适合使用 DLL 相关插件。
配置方法：
- 第一步：配置 DLLPlugin 生成 manifest 文件：创建一个单独的 Webpack 配置文件，例如 webpack.dll.js，内容如下：

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: {
        // 定义需要打包进 DLL 的库
        vendor: ['react', 'lodash']
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].dll.js',
        library: '[name]_library'
    },
    plugins: [
        new webpack.DllPlugin({
            name: '[name]_library',
            path: path.join(__dirname, 'dist', '[name].manifest.json')
        })
    ]
};

运行 webpack --config webpack.dll.js 命令，会在 dist 目录下生成 vendor.dll.js 和 vendor.manifest.json 文件。vendor.dll.js 包含了 React 和 lodash 等库的代码，vendor.manifest.json 是描述 DLL 内容的清单文件。

第二步：在主 Webpack 配置中使用 DLLReferencePlugin：在主 Webpack 配置文件（webpack.config.js）中添加如下配置：

const path = require('path');
const webpack = require('webpack');

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

这样在构建主项目时，Webpack 会根据 manifest 文件去引用已经打包好的 vendor.dll.js，而不会重复打包这些第三方库，从而加快构建速度。

星途面试题库

面试题：Webpack 中如何优化第三方库的打包与加载

知识考点

面试题答案

externals

DLLPlugin 和 DLLReferencePlugin