Как можно настроить минимизацию в Webpack?

Добрый день! Чтобы настроить минимизацию в вашем проекте с использованием Webpack, вы уже на правильном пути, используя `TerserPlugin`. Однако, в вашем конфигурационном файле есть некоторые моменты, которые требуют исправления и оптимизации.

1. **Удалите дублирование `optimization`:** У вас есть два блока `optimization`. Это приведет к тому, что только второй блок будет применен. Вам нужно объединить их в один.

2. **Минимизация CSS:** Вы также можете минимизировать CSS, используя плагин `MiniCssExtractPlugin`. Он может работать в сочетании с `css-minimizer-webpack-plugin`.

3. **Настройка TerserPlugin:** Вы можете настроить TerserPlugin более детально, в зависимости от ваших потребностей.

Вот пример конфигурации с учетом вышеописанных изменений:

```javascript
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

const app = {
    mode: "production",
    entry: "./src/start.jsx",
    output: {
        filename: (pathData) => {
            const date = new Date().toJSON().slice(0, 10);
            var seconds = new Date().getTime() / 10000;
            return date + '.' + Math.round(seconds) + '.app.js';
        },
        path: path.resolve(__dirname, 'dist'),
        clean: true, // Включает автоматическую очистку выходной директории
    },
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    mangle: true,
                    keep_classnames: true,
                },
                // Добавьте дополнительные параметры для улучшения производительности
                parallel: true,
            }),
            new CssMinimizerPlugin(),
        ],
    },
    plugins: [
        new HTMLWebpackPlugin({
            template: './src/index.html'
        }),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: (pathData) => {
                const date = new Date().toJSON().slice(0, 10);
                var seconds = new Date().getTime() / 10000;
                return date + '.' + Math.round(seconds) + '.app.css';
            },
        }),
    ],
    resolve: {
        alias: {
            '@': path.join(__dirname, './src/'),
        },
        extensions: ['.jsx', '.tsx', '.ts', '.d.ts', '.js', '.css'],
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx|ts|tsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                },
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                ],
            },
            // Добавьте правила для других типов файлов, если необходимо
        ]
    }
};

module.exports = app;
```

### Основные изменения:

- **Объединение optimization:** Все настройки минимизации объединены в один объект.
- **CssMinimizerPlugin:** Этот плагин добавлен для минимизации CSS-файлов.
- **Параметр `clean` в `output`:** Включает автоматическую очистку выходной директории перед каждой сборкой.
- **Параллелизация в TerserPlugin:** Это может помочь ускорить процесс сборки, используя мультипоточность.

Обязательно убедитесь, что у вас установлены все необходимые зависимости, включая `css-minimizer-webpack-plugin`, если его нет. Удачи с вашим проектом!

По идее, первый optimization будет перезаписан вторым optimization=false. Либо удалите второй блок, либо замените его на такой: 
 
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");

optimization: {
    minimize: true,
    minimizer: [
        new TerserPlugin({
            terserOptions: {
                mangle: true,
                keep_classnames: true,
                keep_fnames: false,
            },
        }),
        new CssMinimizerPlugin(),
    ],
    splitChunks: {
       chunks: 'all',
    },
},
 
 
Я ожидаю что в бандле будут переименованы хотя бы локальные переменные, чтобы как-то защитить код.
 
 Минимизация !== обфускация, код может быть изменен, но не с целью "защиты".