Приложение на 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")
}),
],
};