feat: Настроен webpack плагин для сжатия prod сборки

config/build/buildPlugins.ts

@@ -1,4 +1,5 @@
 import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'
+import CompressionPlugin from 'compression-webpack-plugin'
 import HtmlWebpackPlugin from 'html-webpack-plugin'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import webpack from 'webpack'
@@ -22,6 +23,9 @@ import { BuildOptions } from './types/config'
  * - ReactRefreshWebpackPlugin: обеспечивает быструю перезагрузку React компонентов
  * - HotModuleReplacementPlugin: включает горячую замену модулей (HMR)
  *
+ * Плагины только для production:
+ * - CompressionPlugin: создает gzip-сжатые версии файлов для уменьшения размера передачи
+ *
  * @param {BuildOptions} options - Опции сборки
  * @param {BuildPaths} options.paths - Пути проекта
  * @param {boolean} options.isDev - Флаг режима разработки
@@ -68,6 +72,17 @@ export function buildPlugins({
     )
     plugins.push(new ReactRefreshWebpackPlugin({ overlay: false }))
     plugins.push(new webpack.HotModuleReplacementPlugin())
+  } else {
+    // Сжатие файлов для production сборки
+    // Создает .gz файлы для всех JS и CSS файлов больше 10KB
+    plugins.push(
+      new CompressionPlugin({
+        algorithm: 'gzip',
+        test: /\.(js|css|html|svg)$/,
+        threshold: 10240, // Сжимаем только файлы больше 10KB
+        minRatio: 0.8, // Сжимаем только если размер уменьшается минимум на 20%
+      })
+    )
   }
   return plugins
 }

package.json

@@ -51,6 +51,7 @@
         "@typescript-eslint/eslint-plugin": "^8.16.0",
         "@typescript-eslint/parser": "^8.16.0",
         "babel-loader": "^9.2.0",
+        "compression-webpack-plugin": "^11.1.0",
         "css-loader": "^7.1.0",
         "eslint": "^9.15.0",
         "eslint-config-prettier": "^9.1.0",

pnpm-lock.yaml

@@ -96,6 +96,9 @@ importers:
       babel-loader:
         specifier: ^9.2.0
         version: 9.2.1(@babel/core@7.28.5)(webpack@5.103.0)
+      compression-webpack-plugin:
+        specifier: ^11.1.0
+        version: 11.1.0(webpack@5.103.0)
       css-loader:
         specifier: ^7.1.0
         version: 7.1.2(webpack@5.103.0)
@@ -2620,6 +2623,12 @@ packages:
     resolution: {integrity: sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==}
     engines: {node: '>= 0.6'}
 
+  compression-webpack-plugin@11.1.0:
+    resolution: {integrity: sha512-zDOQYp10+upzLxW+VRSjEpRRwBXJdsb5lBMlRxx1g8hckIFBpe3DTI0en2w7h+beuq89576RVzfiXrkdPGrHhA==}
+    engines: {node: '>= 18.12.0'}
+    peerDependencies:
+      webpack: ^5.1.0
+
   compression@1.8.1:
     resolution: {integrity: sha512-9mAqGPHLakhCLeNyxPkK4xVo746zQ/czLH1Ky+vkitMnWfWZps8r0qXuwhwizagCRttsL4lfG4pIOvaWLpAP0w==}
     engines: {node: '>= 0.8.0'}
@@ -8614,6 +8623,12 @@ snapshots:
     dependencies:
       mime-db: 1.54.0
 
+  compression-webpack-plugin@11.1.0(webpack@5.103.0):
+    dependencies:
+      schema-utils: 4.3.3
+      serialize-javascript: 6.0.2
+      webpack: 5.103.0(esbuild@0.25.12)(webpack-cli@5.1.4)
+
   compression@1.8.1:
     dependencies:
       bytes: 3.1.2