Webpack 打包优化实践：使用 Dllplugin 和 add-asset-html-webpack-plugin 加速打包-JavaScript中文网-JavaScript教程资源分享门户

Webpack 已经成为了前端开发中最不可或缺的工具之一。但随着项目规模增大，Webpack 的构建时间也会相应变长，这就要求我们必须思考如何优化打包速度，提高开发效率。

本文将介绍两种优化手段——DllPlugin 和 add-asset-html-webpack-plugin，帮助大家更好地优化自己的 Webpack 构建。

DllPlugin

DllPlugin 是 Webpack 自带的插件，可以将第三方库、框架等单独打包成一个文件，提高打包速度。具体来说，DllPlugin 的基本思路是固定一个不常变化的依赖库的版本，不进行频繁变动和更新，而是将这部分代码提前打包成静态文件（例如：vendor.js），然后在生产环境下直接引用。

接下来我们来了解如何使用 DllPlugin：

创建一个新目录作为单独的配置文件目录，比如setupScripts
再目录里面创建两个文件，分别为webpack.config.dll.js和manifest.json。

具体示例代码如下：

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

const vendors = ['react', 'react-dom', 'react-router-dom'];

module.exports = {
  entry: {
    vendor: vendors
  },
  output: {
    path: path.join(__dirname, '..', 'dist'),
    filename: '[name].dll.js',
    library: '[name]_[hash]',
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '..', 'dist', 'manifest.json'),
      name: '[name]_[hash]',
      context: path.resolve(__dirname, '..'),
    })
  ]
};

// manifest.json
{
  "name": "vendor_[hash]",
  "content": {
    "react": "node_modules/react/dist/react.min.js",
    "react-dom": "node_modules/react-dom/dist/react-dom.min.js",
    "react-router-dom": "node_modules/react-router-dom/dist/react-router-dom.min.js"
  }
}

在 package.json 中新增配置脚本：

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

运行 npm run dll，即可生成 vendor.dll.js 文件和 manifest.json 文件。

# 注意要在设置好dll.config.js 在根目录下
$ npm run dll

引入AddAssetHtmlPlugin来添加到生成的 HTML 中

// webpack.config.js 中配置 plugins
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');

module.exports = {
  entry: {
    app: './src/index.js',
  },
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'Webpack demo',
      template: 'public/index.html',
    }),
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
    new AddAssetHtmlPlugin({
      filepath: require.resolve('./dist/vendor.dll.js'),
      includeSourcemap: false,
    }),
  ],
  optimization: {
    runtimeChunk: 'single',
    moduleIds: 'hashed',
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 0,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
            return `npm.${packageName.replace('@', '')}`;
          },
        },
      },
    },
  },
};

add-asset-html-webpack-plugin

AddAssetHtmlPlugin 是插件，可以在 webpack 构建时自动向生成的 HTML 文件中添加指定的静态文件。在使用 DllPlugin 的时候，我们可以使用 AddAssetHtmlPlugin 将该生成的 vendor.dll.js 添加到 HTML。

使用方法如下：

安装 add-asset-html-webpack-plugin

$ yarn add add-asset-html-webpack-plugin

在上方的 DllPlugin 步骤中，我们已经生成了vendor.dll.js和manifest.json，需要在 webpack.config.js 中使用该插件。我们只需要在配置文件中添加 AddAssetHtmlPlugin 并指定要引入的 DLL 文件的路径即可。

const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');

new AddAssetHtmlPlugin({
  filepath: path.resolve(__dirname, 'dist/vendor.dll.js')
}),

这么做可以确保在 Webpack 构建时自动向 HTML 文件中添加静态文件，进而减小构建的体积，提高构建速度。

总结

本文介绍了如何使用 DllPlugin 和 add-asset-html-webpack-plugin 优化 Webpack 构建速度。其中，DllPlugin 可以将第三方库、框架等单独打包成一个文件，提高打包速度；而 add-asset-html-webpack-plugin 可以在构建时自动向生成的 HTML 文件中添加指定的静态文件。这两种优化手段可以帮助我们更好地优化自己的 Webpack 构建，提高开发效率。

希望本文对你有所帮助，如果有任何疑问或建议，欢迎在评论区留言交流讨论。

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