webpack - 如何提高构建速度（Webpack、Pug、SCSS）？

Question

我有一个大项目。我使用 Pug 构建 HTML，使用 SASS 构建样式。我的项目包含 35 页，包含包含和混合。以及其他基本的东西，如图像、样式和脚本。 开发模式下的初始构建需要 10 分钟。在生产中 - 6 分钟。

我觉得太慢了。

如何提高建造速度？是否可以让 Webpack 更快地构建 Pug？

测速日志截图

网络包配置：

const path = require("path");
const webpack = require("webpack");
const fs = require("fs");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const SpriteLoaderPlugin = require("svg-sprite-loader/plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const DuplicatePackageCheckerPlugin = require("duplicate-package-checker-webpack-plugin");
const TerserJSPlugin = require("terser-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

const paths = {
  src: path.resolve(__dirname, "src"),
  build: path.resolve(__dirname, "build"),
};

const smp = new SpeedMeasurePlugin();

module.exports = (env, argv) => {
  return smp.wrap({
    entry: {
      index: "./src/index.js",
    },
    output: {
      path: paths.build,
      filename: "[name].[hash].js",
    },
    optimization: {
      minimize: argv.mode !== "development",
      minimizer: [
        new TerserJSPlugin({
          cache: true,
          parallel: true,
        }),
      ],
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/].*\.js$/,
            filename: "vendor.[hash].js",
            chunks: "all",
          },
        },
      },
    },
    resolve: {
      alias: {
        "@": paths.src,
      },
    },
    module: {
      rules: [
        {
          test: require.resolve("jquery"),
          use: [
            {
              loader: "expose-loader",
              options: {
                exposes: ["$", "jQuery"],
              },
            },
          ],
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: [
            {
              loader: "cache-loader",
            },
            {
              loader: "thread-loader",
            },
            {
              loader: "babel-loader",
              options: {
                presets: ["@babel/preset-env"],
              },
            },
          ],
        },
        {
          test: /\.pug$/,
          use: [
            {
              loader: "pug-loader",
              options: {
                pretty: argv.mode !== "development",
              },
            },
          ],
        },
        {
          test: /\.scss$/,
          exclude: /node_modules/,
          use: [
            argv.mode === "development"
              ? {
                  loader: "style-loader",
                }
              : {
                  loader: MiniCssExtractPlugin.loader,
                  options: {
                    publicPath: "../",
                  },
                },
            "css-loader",
            "postcss-loader",
            "fast-sass-loader",
          ],
        },
        {
          test: /\.svg$/,
          include: /icons/,
          use: [
            {
              loader: "svg-sprite-loader",
              options: {
                runtimeCompat: true,
              },
            },
            "svg-transform-loader",
            "svgo-loader",
          ],
        },
        {
          test: /\.(gif|png|jpe?g)$/i,
          include: /ill/,
          use: [
            {
              loader: "responsive-loader",
              options: {
                name: "[name]-[width].[ext]",
                outputPath: "images",
              },
            },
            {
              loader: "image-webpack-loader",
              options: {
                mozjpeg: {
                  progressive: true,
                  quality: 65,
                },
                optipng: {
                  enabled: false,
                },
                pngquant: {
                  quality: [0.8, 1],
                },
                gifsicle: {
                  interlaced: false,
                },
              },
            },
          ],
        },
        {
          test: /\.(svg)$/i,
          include: /ill/,
          use: [
            {
              loader: "file-loader",
              options: {
                name: "[name].[ext]",
                outputPath: "images",
              },
            },
          ],
        },
        {
          test: /\.(eot|ttf|woff|woff2)$/,
          use: [
            {
              loader: "file-loader",
              options: {
                name: "fonts/[name].[ext]",
              },
            },
          ],
        },
        {
          test: /\.(mp4)$/,
          use: [
            {
              loader: "file-loader",
              options: {
                name: "video/[name].[ext]",
              },
            },
          ],
        },
      ],
    },
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
      }),
      new MiniCssExtractPlugin({
        filename: "./css/[name].[hash].css",
        chunkFilename: "[name].[hash].css",
      }),
      new SpriteLoaderPlugin({
        plainSprite: true,
      }),
      new CopyWebpackPlugin({
        patterns: [
          {
            from: "static",
            to: "static",
          },
        ],
      }),
      new CleanWebpackPlugin({
        dry: true,
        cleanOnceBeforeBuildPatterns: ["build/*"],
      }),
      new DuplicatePackageCheckerPlugin(),
      ...fs
        .readdirSync(path.resolve(__dirname, "src/template/pages"))
        .filter((fileName) =>
          fileName.endsWith(".pug") && env !== undefined && env.pages.length
            ? env.pages.split(",").includes(fileName)
            : true
        )
        .map(
          (page) =>
            new HtmlWebpackPlugin({
              minify: false,
              template: `${paths.src}/template/pages/${page}`,
              filename: `./${page.replace(/\.pug/, ".html")}`,
            })
        ),
    ],
    devServer: {
      watchOptions: {
        ignored: /node_modules/,
      },
      hot: true,
      port: process.env.PORT,
      overlay: {
        errors: false,
        warnings: false,
      },
    },
  });
};

PS我的堆栈对于这样的大项目是否正确？

提前感谢您的答案。