Приложение на react запускается 10 минут

В какую сторону копать? приложение на react'e стартует минут 10, при ребилде тоже самое. Сам ни разу не frontend но бесит жуть

npm run start:dev

  "scripts": {
    "format": "prettier --write \"src/**/*.{ts,tsx}\"",
    "format:check": "prettier --check \"src/**/*.{ts,tsx}\"",
    "build": "webpack -p --config ./webpack.config.prod.js",
    "build:dev": "webpack -d --config ./webpack.config.dev.js",
    "start:dev": "webpack-dev-server -d --config ./webpack.config.dev.js --progress",
    "test": "jest",
    "styleguide": "styleguidist server",
    "styleguide:build": "styleguidist build"
  },

webpack.config.dev.js

const webpack = require("webpack");
const path = require("path");
const merge = require('webpack-merge');
const commonConfig = require("./webpack.config");
const WorkboxWebpackPlugin = require("workbox-webpack-plugin");


module.exports = merge(commonConfig, {
    devtool: "source-map",
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new WorkboxWebpackPlugin.InjectManifest({
            swSrc: path.resolve(__dirname, "./src", 'sw.js'),
            maximumFileSizeToCacheInBytes: 5242880, // 5mb
            dontCacheBustURLsMatching:  /\/skins.*/,
        })
    ],
    devServer: {
        port: process.env.SERVER_PORT || 8080,
        historyApiFallback: true,
    }
});

webpack.config

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");


module.exports = {
    context: path.join(__dirname, "./src"),
    entry: {
        app: ["./main.tsx"]
    },
    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: "[name].[hash].bundle.js",
        chunkFilename: '[id].[hash].js',
        publicPath: "/",
    },
    resolve: {
        // add '.ts' and '.tsx' as resolvable extensions
        extensions: [".ts", ".tsx", ".js", ".json"]
    },
    module: {
        rules: [
            // all files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'
            {
                test: /\.tsx?$/,
                loader: "awesome-typescript-loader"
            },
            // all output '.js' files will have any sourcemaps re-processed by 'source-map-loader'
            {
                enforce: "pre",
                test: /\.js$/,
                loader: "source-map-loader"
            },
            {
                test: /\.css$/,
                exclude: /tinymce[\\/]skins[\\/]/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /tinymce[\\/]skins[\\/]/,
                loader: 'file-loader?name=[path][name].[ext]&context=node_modules/tinymce'
            },
            {
                test: require.resolve('tinymce/tinymce'),
                use: [
                    'imports-loader?this=>window',
                    'exports-loader?window.tinymce'
                ],
            },
            {
                test: /tinymce\/(themes|plugins)\//,
                use: [
                    'imports-loader?this=>window'
                ]
            }

        ]
    },
    optimization: {
        splitChunks: {
            name: true,
             // minSize: 10000,
             // maxSize: 1048576,
            cacheGroups: {
                commons: {
                    chunks: "initial",
                    minChunks: 2
                },
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    chunks: "all",
                    priority: -10
                }
            }
        },
        runtimeChunk: true
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "public", "index.html"),
            favicon: path.resolve(__dirname, "public", "favicon.ico")
        }),

    ],
};

Ответы (0 шт):