Почему webpack долго собирает проект?
Заметил, что чем больше страниц тем дольше работает 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' }], ], }, }, }), ], }, }; |
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" } } |
{ "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" } }
Дополнительно:
Для начала стоит разобраться, где именно тормозит. https://webpack.js.org/plugins/profiling-plugin/ например
Я бы ещё предложил выкинуть babel, заменить хотя бы на esbuild-loader. https://github.com/privatenumber/esbuild-loader
Возможно ещё попробовать включить кеширование https://webpack.js.org/configuration/cache/
Либо оптимизировать руками и добавлять в репу уже оптимизированные файлы.
Либо не оптимизировать руками в принципе, а использовать модуль mod_pagespeed для nginx, который автоматически оптимизирует отдаваемые картинки.
Либо переходить сразу на webp, благо поддержка у него уже почти полная.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Существует несколько возможных причин, по которым webpack может долго собирать проект. Ниже я перечислю наиболее распространенные проблемы и способы их решения:
1. **Большой объем файлов**: Если ваш проект содержит большое количество файлов, webpack может занимать много времени на обработку каждого из них. Рекомендуется оптимизировать количество файлов в проекте, объединяя их в более крупные модули.
2. **Слишком сложные зависимости**: Если у вас есть сложные зависимости между модулями, webpack может тратить много времени на разрешение зависимостей. Попробуйте упростить зависимости или использовать более эффективные методы разрешения зависимостей.
3. **Плохая конфигурация webpack**: Неправильная настройка webpack может привести к долгому времени сборки проекта. Убедитесь, что ваша конфигурация webpack оптимизирована для вашего проекта и соответствует его требованиям.
4. **Использование медленных загрузчиков или плагинов**: Некоторые загрузчики или плагины webpack могут быть неэффективными и замедлять процесс сборки. Попробуйте исключить или заменить медленные загрузчики и плагины.
Применение этих рекомендаций поможет вам оптимизировать процесс сборки вашего проекта с использованием webpack и уменьшить время, затрачиваемое на этот процесс.