Webpack DLLPlugin 实例-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是一个前端领域使用最广泛的打包工具，可以将多个 JS 和 CSS 文件打包成一个或多个 bundle。然而，Webpack 的打包速度较慢，特别是当我们使用了大量第三方库时。DLLPlugin 是 Webpack 的一个插件，通过把一组库提前进行编译打包，使得每一次重新构建时只需要编译自己的代码，而不用再去编译第三方库，从而大大提高了构建速度。

本文将介绍 Webpack DLLPlugin 的具体用法，并提供一个实例。

安装

首先，需要全局安装 Webpack：

$ npm install webpack -g

然后，在项目中安装 webpack 和 webpack-cli：

$ npm install webpack webpack-cli --save-dev

DLLPlugin 的配置

下面是 DLLPlugin 的简单配置：

// javascriptcn.com code example
const path = require('path');
const webpack = require('webpack');

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

mode：模式，production 和 development 两种模式，这里选择了 production。
entry：入口，这里只有一个 entry，包含了两个库：React 和 React-DOM，它们会被打包成 library.dll.js 文件。
output：输出文件，文件名为 entry 的名字 library.dll.js。
plugins：插件，这里使用了 DllPlugin，它会生成一个 manifest 文件，用于在主配置文件中使用。

使用 DLLPlugin

下面是使用 DLLPlugin 的简单配置：

// javascriptcn.com code example
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

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

mode：模式，production 和 development 两种模式，这里选择了 production。
entry：入口，这里只有一个 entry，即项目的入口文件 index.js。
output：输出文件，文件名为 entry 的名字 app.js。
plugins：插件，这里使用了 DllReferencePlugin，它会引用 library.manifest.json 文件，以便在编译 app.js 文件时不必再编译 React 和 React-DOM。

示例代码

webpack.config.dll.js

// javascriptcn.com code example
const path = require('path');
const webpack = require('webpack');

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

webpack.config.js

// javascriptcn.com code example
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

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

package.json

// javascriptcn.com code example
{
  "name": "webpack-dll-demo",
  "scripts": {
    "build:dll": "webpack --config webpack.config.dll.js",
    "build": "webpack --config webpack.config.js"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "html-webpack-plugin": "^5.3.2",
    "webpack": "^5.50.0",
    "webpack-cli": "^4.7.2"
  }
}

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<div>Hello, World!</div>, document.getElementById('root'));

src/index.html

// javascriptcn.com code example
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Webpack DLL Demo</title>
</head>

<body>
  <div id="root"></div>
  <script src="./library.dll.js"></script>
  <script src="./app.js"></script>
</body>

</html>

运行

打开终端，运行以下命令：

$ npm run build:dll
$ npm run build

打开 dist 目录下的 index.html，可以看到页面上已经正确渲染出了 Hello, World!。

结论

通过使用 DLLPlugin 插件，我们可以提高 Webpack 构建的速度，尤其是在使用大量的第三方库时。此外，我们还应该尽可能地减少构建需要处理的模块，避免无用代码对构建速度的影响。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6734fb0c0bc820c5824c0b40