Webpack热装非常慢

Question

我对Webpack还是很陌生，当我最初在我的项目中对其进行设置时，它运行良好，但随着项目的进展，它似乎变得越来越慢（也许是因为包含了越来越多的软件包？）。现在，根据控制台输出，该过程将花费1秒以上的时间：

这似乎并不准确，因为实际上这需要5到10秒钟，通常我只是无聊的等待，然后按F5键重新加载页面，因为这样做会更快。我想回到让HMR来做的事情，但我需要弄清楚为什么它这么慢，然后修复，然后才能做。

这是我的 webpack.config.js ：

/// <binding />
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const dirName = 'wwwroot/dist';
const devMode = process.env.NODE_ENV !== "production";
console.log('path:' + path.resolve(__dirname, 'wwwroot/images'));

module.exports =  {
    mode: devMode ? 'development' : 'production',
    devtool: "source-map",
    entry: {
        app: './wwwroot/js/app.ts',
        addadv: './wwwroot/js/pages/adventures/addadventure.ts'
    },
    output: {
        path: path.resolve(__dirname, dirName),
        filename: '[name].bundle.js',
        publicPath: '/dist/'
    },
    optimization: {
        splitChunks: {
            chunks: 'initial'
        }
    },
    module: {
        rules: [
            {
                test: require.resolve('jquery'),
                loader: 'expose-loader?$!expose-loader?jQuery'
            },
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node-modules/
            },
            {
                test: /\.s[c|a]ss$/,
                use: [
                    'css-hot-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            config: {
                                ctx: {
                                    env: devMode ? 'development' : 'production'
                                }
                            }
                        }
                    },
                    'resolve-url-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'fonts/'
                    }
                }]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                include: [
                    path.resolve(__dirname, 'wwwroot/images')
                ],
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'images',
                            publicPath: 'images'
                        }
                    }
                ]
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }),
        new CleanWebpackPlugin(dirName, {}),
        new MiniCssExtractPlugin({
            filename: "bundle.css",
            chunkFilename: "bundle.css"
        }),
        new BundleAnalyzerPlugin({
            analyzerMode: 'disabled',
            generateStatsFile: true,
            statsOptions: { source: false }
        })
    ]
};

和我的 package.json

{
  "name": "tap.extranet",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch-dev": "webpack --watch",
    "build-dev": "webpack",
    "build-prod": "cross-env NODE_ENV=production webpack",
    "analyse-bundles": "webpack-bundle-analyzer --port 4200 wwwroot/dist/stats.json"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.7.2",
    "@types/jquery": "^3.3.29",
    "@types/jqueryui": "1.12.7",
    "@types/jquery.validation": "1.16.6",
    "@types/jquery-validation-unobtrusive": "3.2.32",
    "@types/webpack-env": "^1.13.7",
    "@types/knockout": "^3.4.64",
    "aspnet-webpack": "^3.0.0",
    "autoprefixer": "^9.4.7",
    "clean-webpack-plugin": "^1.0.1",
    "cross-env": "^5.2.0",
    "css-hot-loader": "^1.4.3",
    "css-loader": "^2.1.0",
    "cssnano": "^4.1.8",
    "expose-loader": "^0.7.5",
    "file-loader": "^3.0.1",
    "font-awesome-loader": "^1.0.2",
    "jquery": "^3.3.1",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "popper.js": "^1.14.7",
    "postcss-loader": "^3.0.0",
    "precss": "^4.0.0",
    "resolve-url-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "ts-loader": "^5.3.3",
    "typescript": "^3.3.3",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.3",
    "webpack-bundle-analyzer": "^3.0.4",
    "webpack-cli": "^3.2.3",
    "webpack-dev-middleware": "^3.5.2",
    "webpack-hot-middleware": "^2.24.3",
    "knockout": "3.5.0",
    "knockout-sortable": "1.1.0",
    "jquery-ui": "1.12.1"
  },
  "-vs-binding": {
    "BeforeBuild": [
      "build-dev"
    ],
    "ProjectOpened": [
      "watch-dev"
    ]
  },
  "dependencies": {
    "bootstrap": "^4.3.0",
    "font-awesome": "^4.7.0"
  }
}

最后，这是我的捆绑包的屏幕截图：

我尝试将cache: true添加到webpack配置中，但这没什么区别。