diff --git a/config/build/buildLoaders.ts b/config/build/buildLoaders.ts index 6f43be8..4fd1e06 100644 --- a/config/build/buildLoaders.ts +++ b/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] } diff --git a/config/build/buildWebpackConfig.ts b/config/build/buildWebpackConfig.ts index 55eab69..f9fbd46 100644 --- a/config/build/buildWebpackConfig.ts +++ b/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 в отдельный файл + }, } } diff --git a/config/build/loaders/buildBabelLoader.ts b/config/build/loaders/buildBabelLoader.ts index 0f0bbad..f5bbc79 100644 --- a/config/build/loaders/buildBabelLoader.ts +++ b/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 ), diff --git a/config/build/loaders/buildTypescriptLoader.ts b/config/build/loaders/buildTypescriptLoader.ts deleted file mode 100644 index 41ac83d..0000000 --- a/config/build/loaders/buildTypescriptLoader.ts +++ /dev/null @@ -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 -}