webpack 大杀器：DllPlugin 与 DllReferencePlugin-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，webpack 已经成为了必不可少的工具。它可以帮助我们打包、压缩、优化代码等等。但是，在项目变得越来越庞大的时候，webpack 的打包时间也会越来越长，这对开发效率造成了很大的影响。为了解决这个问题，webpack 提供了两个插件：DllPlugin 和 DllReferencePlugin。

DllPlugin

DllPlugin 可以将一些基本不会变化的代码打包成一个单独的文件，这个文件可以在后续的打包过程中被复用，从而减少了打包的时间。这个单独的文件被称为“动态链接库”（Dynamic Linking Library，简称 DLL）。

使用 DllPlugin 的过程分为两个步骤：

首先，需要将一些基本不会变化的代码打包成一个 DLL 文件。这个文件可以包含一些常用的库、框架或者是自己编写的一些基础代码。这个过程只需要执行一次，之后就可以重复使用这个 DLL 文件了。
在后续的打包过程中，需要使用 DllReferencePlugin 来引用这个 DLL 文件。这个插件可以将这个 DLL 文件中的代码注入到最终的打包文件中，从而减少了打包时间。

下面是一个使用 DllPlugin 的示例代码：

// webpack.config.dll.js
const path = require('path');
const webpack = require('webpack');

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

这个配置文件会将 react、react-dom 和 lodash 打包成一个名为 vendor.dll.js 的文件，并将这个文件放在 dist 目录下。同时，这个文件会被定义为一个全局变量，名称为 vendor。最后，使用 DllPlugin 插件将这个 DLL 文件的信息输出到 dist 目录下的 vendor.json 文件中。

DllReferencePlugin

DllReferencePlugin 是用来引用 DLL 文件中的代码的。使用 DllReferencePlugin 的过程也分为两个步骤：

在 webpack 的配置文件中，需要使用 DllReferencePlugin 插件来引用之前生成的 DLL 文件。
在代码中，需要使用 import 或者 require 来引用 DLL 文件中的代码。

下面是一个使用 DllReferencePlugin 的示例代码：

// webpack.config.js
const path = require('path');
const webpack = require('webpack');

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

这个配置文件会将 src 目录下的 index.js 文件打包成 dist 目录下的 bundle.js 文件，并使用 DllReferencePlugin 插件引用之前生成的 vendor.dll.js 文件。在代码中，可以使用 import 或者 require 来引用 vendor.dll.js 文件中的代码。

总结

使用 DllPlugin 和 DllReferencePlugin 可以大大减少 webpack 的打包时间，提高开发效率。但是，使用这两个插件也需要注意一些问题：

DLL 文件中的代码必须是基本不会变化的，如果 DLL 文件中的代码发生变化，需要重新生成 DLL 文件。
DLL 文件中的代码必须是可以被复用的，如果 DLL 文件中的代码只被使用了一次，那么使用 DllPlugin 和 DllReferencePlugin 的效果就会变得很小。
在使用 DllReferencePlugin 的时候，需要注意 DLL 文件的路径和名称是否正确。

以上就是关于 webpack 中 DllPlugin 和 DllReferencePlugin 的详细介绍。希望本文能够对大家有所帮助。

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