Почему webpack долго собирает проект?

Question

[verstak2020]

Заметил, что чем больше страниц тем дольше работает npm run build.
К примеру сейчас 16 страниц, и build собирает где то минут 7-8, это совсем уж не нормально... машина на которой работаю свежая, ресурсов хватает. Пожскажите, в чем может быть причина?

Прикладываю webpack.config и package.json , вложил в спойлеры для удобства

webpack.config клик

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const FileManagerPlugin = require('filemanager-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
	entry: path.join(__dirname, 'src', 'index.js'),
	performance: {
		hints: false,
		maxEntrypointSize: 512000,
		maxAssetSize: 512000
	},
	output: {
		path: path.join(__dirname, 'dist'),
		filename: 'index.[contenthash].js',
		assetModuleFilename: path.join('images', '[name].[contenthash][ext]'),
	},
	module: {
		
		rules: [
			{
				test: /\.js$/,
				use: 'babel-loader',
				exclude: /node_modules/,
			},
			{
				test: /\.pug$/,
				loader: 'pug-loader',
			},
			{
				test: /\.(scss|css)$/,
				use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'],
			},
			{
				test: /\.(png|jpg|jpeg|gif|mp4)$/i,
				type: 'asset/resource',
			},
			{
				test: /\.svg$/,
				type: 'asset/resource',
				generator: {
					filename: path.join('icons', '[name].[contenthash][ext]'),
				},
			},
			{
				test: /\.(woff2?|eot|ttf|otf)$/i,
				type: 'asset/resource',
			},
		],
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: path.join(__dirname, 'src', 'pug/index.pug'),
			filename: 'index.html',
		}),
		new HtmlWebpackPlugin({
			template: path.join(__dirname, 'src', 'pug/about.pug'),
			filename: 'about.html',
		}),
		new HtmlWebpackPlugin({
			template: path.join(__dirname, 'src', 'pug/calc.pug'),
			filename: 'calc.html',
		}),
		new HtmlWebpackPlugin({
			template: path.join(__dirname, 'src', 'pug/catalog.pug'),
			filename: 'catalog.html',
		}),
		new HtmlWebpackPlugin({
			template: path.join(__dirname, 'src', 'pug/card-100-18.pug'),
			filename: 'card-100-18.html',
		}),
		new HtmlWebpackPlugin({
			template: path.join(__dirname, 'src', 'pug/card-80-18.pug'),
			filename: 'card-80-18.html',
		}),
		new HtmlWebpackPlugin({
			template: path.join(__dirname, 'src', 'pug/card-80-16.pug'),
			filename: 'card-80-16.html',
		}),
		new HtmlWebpackPlugin({
			template: path.join(__dirname, 'src', 'pug/card-60-18.pug'),
			filename: 'card-60-18.html',
		}),
		new HtmlWebpackPlugin({
			template: path.join(__dirname, 'src', 'pug/card-60-16.pug'),
			filename: 'card-60-16.html',
		}),
		new HtmlWebpackPlugin({
			template: path.join(__dirname, 'src', 'pug/card-60-12.pug'),
			filename: 'card-60-12.html',
		}),
		new HtmlWebpackPlugin({
			template: path.join(__dirname, 'src', 'pug/card-60-8.pug'),
			filename: 'card-60-8.html',
		}),
		new HtmlWebpackPlugin({
			template: path.join(__dirname, 'src', 'pug/card-40-8.pug'),
			filename: 'card-40-8.html',
		}),
		new HtmlWebpackPlugin({
			template: path.join(__dirname, 'src', 'pug/card-40-7.pug'),
			filename: 'card-40-7.html',
		}),
		new HtmlWebpackPlugin({
			template: path.join(__dirname, 'src', 'pug/card-30-6.pug'),
			filename: 'card-30-6.html',
		}),
		new HtmlWebpackPlugin({
			template: path.join(__dirname, 'src', 'pug/404.pug'),
			filename: '404.html',
		}),
		new HtmlWebpackPlugin({
			template: path.join(__dirname, 'src', 'pug/closed.pug'),
			filename: 'closed.html',
		}),
		new FileManagerPlugin({
			events: {
				onStart: {
					delete: ['dist'],
				},
				onEnd: {
					copy: [
						{
							source: path.join('src', 'static'),
							destination: 'dist',
						},
					],
				},
			}
		}),
		new MiniCssExtractPlugin({
			filename: '[name].[contenthash].css',
		}),
	],
	devServer: {
		watchFiles: path.join(__dirname, 'src'),
		port: 9002,
	},
	optimization: {
		minimizer: [
			new ImageMinimizerPlugin({
				minimizer: {
					implementation: ImageMinimizerPlugin.imageminMinify,
					options: {
						plugins: [
							['gifsicle', { interlaced: true }],
							['jpegtran', { progressive: true }],
							['optipng', { optimizationLevel: 5 }],
							['svgo', { name: 'preset-default' }],
						],
					},
				},
			}),
		],
	},
};

package.json клик

{
  "name": "webpack-habr",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "serve": "webpack serve --open --mode development",
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "babel-loader": "^9.1.3",
    "css-loader": "^6.10.0",
    "filemanager-webpack-plugin": "^8.0.0",
    "html-webpack-plugin": "^5.6.0",
    "image-minimizer-webpack-plugin": "^4.0.0",
    "imagemin": "^8.0.1",
    "imagemin-gifsicle": "^7.0.0",
    "imagemin-jpegtran": "^7.0.0",
    "imagemin-optipng": "^8.0.0",
    "imagemin-svgo": "^10.0.1",
    "mini-css-extract-plugin": "^2.8.0",
    "postcss-loader": "^8.1.0",
    "postcss-preset-env": "^9.3.0",
    "pug": "^2.0.4",
    "pug-loader": "^2.4.0",
    "sass": "^1.70.0",
    "sass-loader": "^14.1.0",
    "style-loader": "^3.3.4",
    "svgo": "^3.2.0",
    "webpack": "^5.90.1",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "@oveleon/sticky-header": "^0.6.0",
    "accordion-js": "^3.3.4",
    "aos": "^2.3.4",
    "custom-select": "^1.1.15",
    "fslightbox": "^3.4.1",
    "jquery": "^3.7.1",
    "locomotive-scroll": "^4.1.4",
    "scroll-lock": "^2.1.5",
    "scrollmagic": "^2.0.8",
    "swiper": "^11.0.6",
    "tabs": "^0.2.0"
  }
}

Comments

[smilingcheater]

Для начала стоит разобраться, где именно тормозит. https://webpack.js.org/plugins/profiling-plugin/ например
Я бы ещё предложил выкинуть babel, заменить хотя бы на esbuild-loader. https://github.com/privatenumber/esbuild-loader
Возможно ещё попробовать включить кеширование https://webpack.js.org/configuration/cache/

[verstak2020]

smilingcheater, благодарю за ответ, пока ждал решил ещё проверить, и временно отключил сжатие png, оказалось дело в этом, снизил уровень с 5 до 1, стало быстрее работать

[smilingcheater]

verstak2020, у вас на каждом запуске заново оптимизируются все исходники картинок? вы уверены что вам точно это надо?

[verstak2020]

smilingcheater, при каждом запуске build, верно... а как иначе? при разработке у меня картинки не сжимаются

[smilingcheater]

verstak2020, я например использую для этого отдельно gulp, в нём команда для оптимизации файлов + watch на папку с исходниками и при появлении нового файла - он оптимизируется.
Либо оптимизировать руками и добавлять в репу уже оптимизированные файлы.
Либо не оптимизировать руками в принципе, а использовать модуль mod_pagespeed для nginx, который автоматически оптимизирует отдаваемые картинки.
Либо переходить сразу на webp, благо поддержка у него уже почти полная.

[verstak2020]

smilingcheater, спасибо, изучу вопрос