Как я могу оптимизировать мой файл веб-пакета, чтобы он мог быстро перезагрузить?

Question

На моем локальном компьютере во время разработки для каждого изменения, чтобы отразить изменения в браузере, требуется более нескольких минут, чтобы открыть экран.

Версия моего веб-пакета: "веб-пакет": "4.17.1".

Как я могу обрезать следующее содержимое, чтобы я мог видеть мои изменения как можно быстрее с горячей перезагрузкой?

const HtmlWebPackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const GitRevisionPlugin = require('git-revision-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
const {
    assignIn, includes, merge, values,
} = require('lodash');

const ENVIRONMENTS = {
    LOCAL: 'local',
    E2E: 'e2e',
    PROD: 'prod',
    DEV: 'dev',
    QA: 'qa',
};

const nodeEnv = includes(values(ENVIRONMENTS), process.env.NODE_ENV)
    ? process.env.NODE_ENV
    : ENVIRONMENTS.LOCAL;
// eslint-disable-next-line
const environmentConfig = require(`./config/${nodeEnv}`);

const getTemplate = function() {
    console.log('----- TEMPLATE: ', (nodeEnv !== ENVIRONMENTS.DEV) ? './src/template.html' : './src/template_SSI.html');
   return  (nodeEnv !== ENVIRONMENTS.DEV) ? './src/template.html' : './src/template_SSI.html'
};

const defaults = {
    entry: [
        // POLYFILLS
        path.resolve(__dirname, './src/app/utils/polyfills.js'),
        // APP
        path.resolve(__dirname, './src/app/index.js'),
    ],
    output: {
        filename: '[name].bundle.[hash].js',
        path: path.resolve(__dirname, './dist'),
        publicPath: environmentConfig.PUBLIC_PATH,
    },
    devServer: {
        historyApiFallback: true,
        compress: true,
        contentBase: path.resolve(__dirname, './public'),
        port: 2002,
    },
    resolve: {
        alias: {
            components: path.resolve(__dirname, 'src/app/components'),
            containers: path.resolve(__dirname, 'src/app/containers'),
            'state-management': path.resolve(__dirname, 'src/app/state-management'),
            utils: path.resolve(__dirname, 'src/app/utils'),
        },
        modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    },
    module: {
        rules: [
            {
                test: /\.(js)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                    },
                ],
            }, {
                test: /\.(css)$/,
                use: [
                    'style-loader',
                    'css-loader',
                ],
            }, {
                test: /\.svg$/,
                exclude: /node_modules|favicons/,
                use: [
                    {
                        loader: 'svg-react-loader',
                    },
                    {
                        loader: 'svgo-loader',
                        options: {
                            plugins: [
                                {
                                    cleanupIDs: {
                                        minify: false,
                                    },
                                },
                                {
                                    prefixIds: {
                                        active: true,
                                        prefix: `${Math.floor(1000 + (Math.random() * 9000))}-`,
                                    },
                                },
                                { removeTitle: true },
                            ],
                        },
                    },
                ],
            },
            {
                test: /\.(png|jpg|gif)$/,
                exclude: /node_modules|favicons/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {},
                    },
                ],
            },
            {
                test: /\.(png|ico|xml|webmanifest|svg|eot|ttf|woff|woff2|js)$/,
                include: /assets/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'assets/',
                        },
                    },
                ],
            }
        ],
    },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true,
            }),
        ],
    },
    plugins: [
        new HtmlWebPackPlugin({
            filename: './index.html',
            // template: './src/template.html',
            template: getTemplate(),
            adobeAnalytics: environmentConfig.ADOBE_ANALYTICS,
            title: 'Lumin',
            environment: nodeEnv,
        }),
        new webpack.DefinePlugin({
            __ENVIRONMENT_CONFIG__: JSON.stringify(environmentConfig),
        }),
        new CopyWebpackPlugin([
            { from: 'public' },
        ]),
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
        new GitRevisionPlugin(),
    ],
};

if (nodeEnv !== ENVIRONMENTS.PROD) {
    defaults.devtool = 'source-map';
}

module.exports.defaults = defaults;
module.exports.extend = config => assignIn({}, defaults, config);
module.exports.merge = config => merge({}, defaults, config);