进阶的 webpack 5 配置优化

2023-12-17 09:00:49

前言

随着前端项目复杂度的不断提升，webpack 已经成为前端开发中必不可少的构建工具。Webpack 5 是 webpack 的最新版本，它带来了许多新的特性和优化，可以帮助我们构建更快的应用程序。在本文中，我们将介绍如何对 webpack 5 进行高级配置优化，包括提升打包构建速度、减少代码体积和优化加载策略等方面。

提升打包构建速度

1. 使用多线程构建

Webpack 5 支持使用多线程来构建项目，这可以显著提高构建速度。要启用多线程构建，需要在 webpack 配置文件中设置 parallelism 选项。例如：

module.exports = {
  parallelism: 4,
};

2. 使用缓存

Webpack 5 支持使用缓存来加快构建速度。缓存可以存储构建过程中生成的文件，以便下次构建时可以重用这些文件。要启用缓存，需要在 webpack 配置文件中设置 cache 选项。例如：

module.exports = {
  cache: true,
};

3. 使用 Source Map

Source Map 是 webpack 生成的一种特殊的映射文件，它可以将编译后的代码映射回原始的源代码。这对于调试非常有用，但它也会增加构建时间。如果你的项目不需要调试，可以禁用 Source Map 来加快构建速度。要禁用 Source Map，需要在 webpack 配置文件中设置 devtool 选项。例如：

module.exports = {
  devtool: false,
};

减少代码体积

1. 使用 TerserPlugin

TerserPlugin 是一个用于压缩 JavaScript 代码的插件。它可以删除代码中的注释、空行和未使用的代码，并对代码进行混淆，从而减小代码体积。要使用 TerserPlugin，需要在 webpack 配置文件中安装并配置它。例如：

const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          output: {
            comments: false,
          },
        },
      }),
    ],
  },
};

2. 使用 CssMinimizerPlugin

CssMinimizerPlugin 是一个用于压缩 CSS 代码的插件。它可以删除代码中的注释、空行和未使用的代码，并对代码进行混淆，从而减小代码体积。要使用 CssMinimizerPlugin，需要在 webpack 配置文件中安装并配置它。例如：

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  },
};

3. 使用 BrotliPlugin

BrotliPlugin 是一个用于压缩输出文件的插件。它使用 Brotli 算法来压缩文件，可以显著减小文件体积。要使用 BrotliPlugin，需要在 webpack 配置文件中安装并配置它。例如：

const BrotliPlugin = require("brotli-webpack-plugin");

module.exports = {
  plugins: [
    new BrotliPlugin({
      asset: "[path].br[query]",
      test: /\.(js|css|html|svg)$/,
    }),
  ],
};

优化加载策略

1. 使用 SplitChunksPlugin

SplitChunksPlugin 是一个用于将代码拆分成多个文件的插件。这可以减少初始加载的代码体积，从而加快页面加载速度。要使用 SplitChunksPlugin，需要在 webpack 配置文件中安装并配置它。例如：

const SplitChunksPlugin = require("split-chunks-webpack-plugin");

module.exports = {
  optimization: {
    splitChunks: {
      chunks: "all",
      minSize: 30000,
      maxSize: 50000,
    },
  },
};

2. 使用 PrefetchPlugin

PrefetchPlugin 是一个用于预加载文件的插件。这可以减少页面加载时加载文件的延迟。要使用 PrefetchPlugin，需要在 webpack 配置文件中安装并配置它。例如：

const PrefetchPlugin = require("prefetch-webpack-plugin");

module.exports = {
  plugins: [
    new PrefetchPlugin("main.js"),
  ],
};

3. 使用 PreloadPlugin

PreloadPlugin 是一个用于预加载文件的插件。与 PrefetchPlugin 不同的是，PreloadPlugin 会在页面加载之前就开始加载文件。这可以进一步减少页面加载时加载文件的延迟。要使用 PreloadPlugin，需要在 webpack 配置文件中安装并配置它。例如：

const PreloadPlugin = require("preload-webpack-plugin");

module.exports = {
  plugins: [
    new PreloadPlugin({
      rel: "preload",
      as: "script",
      fileBlacklist: [/\.map$/, /hot-update\.js$/],
    }),
  ],
};