refactor: Изменена конфигурация webpack для улучшения производительности и скорости сборки

config/build/buildLoaders.ts

@@ -4,7 +4,6 @@ import { buildBabelLoader } from './loaders/buildBabelLoader'
 import { buildCssLoader } from './loaders/buildCssLoader'
 import { buildFileLoader } from './loaders/buildFileLoader'
 import { buildSvgrLoader } from './loaders/buildSvgrLoader'
-import { buildTypescriptLoader } from './loaders/buildTypescriptLoader'
 import { BuildOptions } from './types/config'
 
 /**
@@ -23,15 +22,16 @@ import { BuildOptions } from './types/config'
  * @returns {webpack.RuleSetRule[]} Массив правил для webpack
  */
 export function buildLoaders({ isDev }: BuildOptions): webpack.RuleSetRule[] {
-  const babelLoader = buildBabelLoader(isDev)
+  // Используем babel-loader для обработки JS и TS файлов
+  // Это ускоряет сборку, так как babel работает быстрее ts-loader
+  // Проверка типов должна выполняться отдельно (например, через tsc --noEmit)
+  const codeBabelLoader = buildBabelLoader(isDev)
 
   const fileLoader = buildFileLoader()
 
   const svgrLoader = buildSvgrLoader()
 
-  const typescriptLoader = buildTypescriptLoader()
-
   const cssLoader = buildCssLoader(isDev)
 
-  return [fileLoader, svgrLoader, babelLoader, typescriptLoader, cssLoader]
+  return [fileLoader, svgrLoader, codeBabelLoader, cssLoader]
 }

config/build/buildWebpackConfig.ts

@@ -56,5 +56,11 @@ export function buildWebpackConfig(
     plugins: buildPlugins(options),
     devtool: isDev ? 'inline-source-map' : undefined,
     devServer: isDev ? buildDevServer(options) : undefined,
+    optimization: {
+      splitChunks: {
+        chunks: 'all', // Разделяем код на чанки для оптимизации загрузки
+      },
+      runtimeChunk: 'single', // Выносим рантайм webpack в отдельный файл
+    },
   }
 }

config/build/loaders/buildBabelLoader.ts

@@ -13,12 +13,17 @@
  */
 export function buildBabelLoader(isDev: boolean) {
   const babelLoader = {
-    test: /\.(js|jsx|tsx)$/,
+    test: /\.(js|jsx|tsx|ts)$/,
     exclude: /node_modules/,
     use: {
       loader: 'babel-loader',
       options: {
-        presets: ['@babel/preset-env'],
+        cacheDirectory: true, // Включаем кеширование для ускорения пересборки
+        presets: [
+          '@babel/preset-env',
+          ['@babel/preset-react', { runtime: 'automatic' }], // Поддержка React 17+ (новый JSX transform)
+          '@babel/preset-typescript', // Поддержка TypeScript через Babel
+        ],
         plugins: [isDev && require.resolve('react-refresh/babel')].filter(
           Boolean
         ),

config/build/loaders/buildTypescriptLoader.ts

@@ -1,23 +0,0 @@
-/**
- * Конфигурация TypeScript loader для webpack
- *
- * Компилирует TypeScript файлы (.ts, .tsx) в JavaScript.
- * Выполняет проверку типов во время сборки.
- *
- * @returns {Object} Конфигурация ts-loader
- *
- * @example
- * // Обрабатывает файлы:
- * // - Component.tsx
- * // - utils.ts
- * // - types.d.ts
- */
-export function buildTypescriptLoader() {
-  const typescriptLoader = {
-    test: /\.tsx?$/,
-    use: 'ts-loader',
-    exclude: '/node-modules/',
-  }
-
-  return typescriptLoader
-}