How to properly split code in webpack?

Question

webpack

For the first time I create a multi-page site, before that I did landings. Decided to work on code optimization.

I include two js bundles in index.html: main.bundle.min.js, vendor.bundle.min.js.
The vendor.bundle.min.js contains the vendor code from node_modules (plugin-1.js, plugin-2.js, plugin-3.js, etc.) and the code from the files folder (third-party plugins that cannot be installed via npm), and in main.bundle.min.js is my custom code + declaration of plugins with their settings. Everything works perfectly.

What about other pages? If, for example, on the about.html page, I do not need plugin-2.js (and the declaration of this plugin with its settings from main.bundle.min.js), but I need plugin-1.js and plugin-3.js from vendor. bundle.min.js What needs to be done so as not to download extra code? Attached data from my webpack.config.js.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
    mode: "production",
    optimization: {
        runtimeChunk: 'single',
        splitChunks: {
            cacheGroups: {
                vendorJS: {
                    name: 'vendor',
                    test: /[\\/]node_modules[\\/]|files[\\/]/,
                    chunks: 'all',
                    enforce: true,
                },
                vendorCSS: {
                    name: 'vendor',
                    type: 'css/mini-extract',
                    chunks: 'all',
                    enforce: true,
                },
            }
        },
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    format: {
                        comments: false,
                    },
                },
                extractComments: false,
            }),
            new CssMinimizerPlugin(),
        ]
    },
    output: {
        filename: '[name].bundle.min.js',
        chunkFilename: '[name].bundle.min.js',
    },
    module: {
        rules: [
            {
                test: /\.(js)$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                    }
                }
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif|woff|woff2|eot|ttf|)$/i,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: "[name].[ext]",
                        outputPath: "../fonts/webfonts", 
                        }
                }
            },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "../css/[name].min.css",
        }),
    ],
};