Webpack DllPlugin 篇-JavaScript中文网-JavaScript教程资源分享门户

在现代化的 Web 开发中，使用前端框架和库已变成了一种不可避免的趋势。在使用大型框架和库的同时，前端开发人员面临一个共同的问题：打包时间变长、打包体积过大。Webpack DllPlugin 可以帮助解决这个问题，本文将介绍 Webpack DllPlugin 原理、应用场景和使用方法。

Webpack DllPlugin 的原理

Webpack DllPlugin 是将不变的部分以 DLL 的形式单独打包，这样做的好处是当你在进行代码打包时，只需要打包你的代码，而不用再打包第三方库和框架等等，从而大大缩短了打包时间，同时也会减小打包后代码的体积。

Webpack DllPlugin 的具体实现步骤如下：

通过 Webpack 配置选项中的 entry 属性，将第三方库和框架等不变的部分初次打包成一个独立的文件（如 vendor.dll.js）。
然后再通过 Webpack 配置选项中的 plugins ，将这个 vendor.dll.js 文件映射到 index.html。
在使用时只需要在自己的 Webpack 配置文件中引入这个 vendor.dll.js 文件即可。

Webpack DllPlugin 的应用场景

Webpack DllPlugin 的应用场景主要是在以下情况下：

当我们的项目使用了一些第三方库，比如 jQuery、React、Redux 等等，打包后这些库的代码都被打包进了同一个文件中，使得这个文件变得十分庞大，从而影响到了加载时间和用户体验。而通过使用 DllPlugin，我们首先将这些库单独打包成 vendor.dll.js 文件，这个文件在项目中的所有页面上都会被使用。这就使得用户第一次访问页面时就只需要加载这个 vendor.dll.js 文件即可，这将大大减少了页面加载时间。
当我们需要将打包后的代码部署到 CDN 上时，我们可以将 vendor.dll.js 文件上传到 CDN 上，这样可以节省一定的服务器流量，同时也会减小压缩后的代码体积。

Webpack DllPlugin 的使用方法

下面我们来看一下 Webpack DllPlugin 的具体使用方法：

在项目根目录下创建一个新的文件夹，命名为 dll。
在 dll 文件夹下创建一个新的名为 webpack.dll.config.js 的 Webpack 配置文件。这个文件的内容大致如下：

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

module.exports = {
  entry: {
    vendor: ['jquery', 'lodash']
  },
  output: {
    path: path.resolve(__dirname, '../dll'),
    filename: '[name].dll.js',
    library: '[name]_library'
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.resolve(__dirname, '../dll/[name]-manifest.json'),
            // 我们先了解一下环境变量的情况
          // 需要使用 webpack --env.production 来指定一下
      context: __dirname,
            // manifest文件中请求的上下文(context)(默认值为webpack的上下文(context))
            // 这个属性是必须配置的，否则会默认为项目的根目录
      name: '[name]_library'
            // 与上面output中配置对应
    })
  ]
};

这段代码是一个简单的 Webpack 配置文件，我们将需要单独打包的第三方库和框架等放在了 entry 中，通过 output 和 plugins 分别设置输出文件名、输出路径和插件，最终会在 dll 文件夹中生成一个名为 vendor.dll.js 的文件和一个名为 vendor-manifest.json 的 manifest 文件。

在项目的 Webpack 配置文件中，我们需要添加以下代码：

new webpack.DllReferencePlugin({
      manifest: require('../dll/vendor-manifest.json')
})

这行代码是告诉 Webpack 我们已经将 vendor.dll.js 文件生成，现在需要使用它来加快代码的打包速度。

当我们要在页面中使用 vendor.dll.js 文件时，我们需要在 index.html 文件中插入以下代码：

<script src="./dll/vendor.dll.js"></script>

这个代码会将 vendor.dll.js 文件引入到页面中。

最后，在我们的 Webpack 打包命令中，需要添加以下代码：

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

这里表示先执行 build:dll 任务，生成 dll 文件，然后再执行 build 任务，打包我们的代码。

Webpack DllPlugin 的总结

Webpack DllPlugin 可以帮助我们将不变的部分单独打包成 DLL 文件，从而加快代码的打包速度，减小打包后代码的体积。它适用于我们的项目使用了大量第三方库和框架等。希望通过本文的介绍，大家能够掌握 Webpack DllPlugin 的使用方法，并在实际开发中加以应用。

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