Webpack 配置之使用 DllPlugin 加快构建速度

前言

在前端开发中，Webpack 是一个非常重要的工具。它可以将多个模块打包成一个或多个 bundle，然后在浏览器中运行。但是，在项目庞大的情况下，Webpack 的构建速度会变得很慢，这会严重影响开发效率。在这种情况下，我们可以使用 DllPlugin 来加快构建速度。

什么是 DllPlugin

DllPlugin 是 Webpack 3 中提供的一个插件，它可以将一些稳定的第三方库打包成一个单独的动态链接库（dll）。这个动态链接库可以被多个 entry 共享，从而加快构建速度。

如何使用 DllPlugin

1. 安装依赖

首先，我们需要安装 webpack 和 webpack-cli：

npm install webpack webpack-cli --save-dev

2. 创建一个配置文件

在项目根目录下，创建一个名为 webpack.dll.config.js 的文件，并添加以下内容：

// javascriptcn.com 代码示例
const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'production',
  entry: {
    // 需要打包的第三方库
    jquery: ['jquery'],
    lodash: ['lodash']
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, 'dist'),
    library: '[name]_dll' // 必须与下面的 name 保持一致
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_dll', // 必须与上面的 library 保持一致
      path: path.resolve(__dirname, 'dist/[name].manifest.json')
    })
  ]
};

3. 打包动态链接库

在命令行中执行以下命令：

npx webpack --config webpack.dll.config.js

执行成功后，会在 dist 目录下生成 jquery.dll.js、lodash.dll.js 和 jquery.manifest.json、lodash.manifest.json 两个文件。

4. 在项目中使用动态链接库

在项目的 webpack 配置文件中添加以下内容：

// javascriptcn.com 代码示例
const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'production',
  entry: {
    app: './src/index.js'
  },
  output: {
    filename: 'app.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new webpack.DllReferencePlugin({
      manifest: require('./dist/jquery.manifest.json')
    }),
    new webpack.DllReferencePlugin({
      manifest: require('./dist/lodash.manifest.json')
    })
  ]
};

然后，在项目的入口文件中引入第三方库：

import $ from 'jquery';
import _ from 'lodash';

$('body').html(_.join(['Hello', 'webpack'], ' '));

最后，在命令行中执行以下命令：

npx webpack

执行成功后，会在 dist 目录下生成 app.bundle.js 文件。

总结

使用 DllPlugin 可以将一些稳定的第三方库打包成一个单独的动态链接库，从而加快构建速度。在使用时，需要注意配置文件和项目的 webpack 配置文件中的设置。希望本文能对你有所帮助！

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655c7822d2f5e1655d69a294