reactjs - npm start和在React中编译的问题(Issue with npm start and compiling in react)

Question

so i have been assigned to maintain a react website.

(因此，我已被分配维护一个React网站。)

i am facing some problem with running the project.. npm start takes approx 4-5mins and likewise every changes saved takes upto 2-3mins (which is toooooo long).

(我在运行项目时遇到了一些问题。npm start大约需要4-5分钟 ，同样，每次保存的更改最多需要2-3分钟 （这太长了）。)

I am unable to figure out where is the issue.

(我无法弄清楚问题出在哪里。)

Maybe in webpack configuration or something else.

(也许在webpack配置中或其他。)

Code details are listed bellow:

(下面列出了代码详细信息：)

webpack.config.js

(webpack.config.js)

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var webpack = require('webpack');

module.exports = {
    entry: './src/index.jsx',
    output: {
        path: path.resolve('dist'),
        filename: 'bundle.js',
    },
    resolve: {
        extensions: ['.js', '.jsx', '.css'],
    },
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015', 'stage-3']
                }
            },
            { test: /.css$/, loader: "style-loader!css-loader" },
            {
                test: /.less$/,
                loader: 'style-loader!css-loader!less-loader'// compiles Less to CSS
            },
            {
                test: /.(png|jpg|)$/,
                loader: 'url-loader?limit=200000'
            }
        ]
    },
    plugins: [new HtmlWebpackPlugin({
        template: './src/index.html',
        filename: 'index.html',
        inject: 'body'
    }), new CopyWebpackPlugin([ { from: 'src/assets', to: 'assets' } ]),
        new webpack.optimize.AggressiveMergingPlugin(),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin({
            mangle: true,
            // compress: {
            //     warnings: false, // Suppress uglification warnings
            //     pure_getters: true,
            //     unsafe: true,
            //     unsafe_comps: true,
            //     screw_ie8: true,
            //     conditionals: true,
            //     unused: true,
            //     comparisons: true,
            //     sequences: true,
            //     dead_code: true,
            //     evaluate: true,
            //     if_return: true,
            //     join_vars: true
            // },
            output: {
                comments: false,
            },
            exclude: [/.min.js$/gi] // skip pre-minified libs
        }),
    ],
    devServer: {
        historyApiFallback: true
    },
    externals: {
        // global app config object
        config: JSON.stringify({
            // apiUrl: 'http://0.0.0.0:8102',
            siteUrl: 'http://localhost:ls3003',
            apiUrl: 'https://api.xyz.com',
            // siteUrl: 'https://dashboard.mltrons.com',
        })
    }
}

Package.json:

(Package.json：)

  "name": "react-redux-registration-login-example",
  "version": "1.0.0",
  "repository": {
    "type": "git",
    "url": "https://github.com/cornflourblue/react-redux-registration-login-example.git"
  },
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --host 0.0.0.0 --port 3000 --disableHostCheck",
    "build": "webpack"
  },
  "dependencies": {
    "@amcharts/amcharts4": "^4.2.3",
    "@data-ui/histogram": "0.0.75",
    "@material-ui/core": "^3.9.0",
    "@material-ui/icons": "^3.0.2",
    "@projectstorm/react-diagrams": "^6.0.1-beta.5",
    "chart.js": "^2.7.3",
    "chartjs-plugin-zoom": "^0.6.6",
    "classnames": "^2.2.6",
    "css-loader": "^2.1.0",
    "deni-react-treeview": "^0.2.15",
    "events": "^3.0.0",
    "formik": "^1.4.1",
    "history": "^4.6.3",
    "jquery": "^3.3.1",
    "material-ui-popup-state": "^1.0.2",
    "moment": "^2.23.0",
    "pusher-js": "^4.3.1",
    "rc-steps": "^3.3.1",
    "react": "^16.0.0",
    "react-addons-css-transition-group": "^15.6.2",
    "react-chartjs-2": "^2.7.4",
    "react-circular-progressbar": "^1.0.0",
    "react-craft-ai-decision-tree": "0.0.26",
    "react-datetime-picker": "^2.1.1",
    "react-dom": "^16.0.0",
    "react-dropzone": "^8.0.3",
    "react-facebook-login": "^4.1.1",
    "react-ga": "^2.5.7",
    "react-google-login": "^4.0.1",
    "react-heatmap-grid": "^0.7.3",
    "react-highlight": "^0.12.0",
    "react-joyride": "^2.0.5",
    "react-linkedin-login-oauth2": "^1.0.6",
    "react-paginate": "^6.2.1",
    "react-redux": "^5.0.5",
    "react-router-dom": "^4.1.2",
    "react-table": "^6.8.6",
    "recharts": "^1.8.5",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0",
    "style-loader": "^0.23.1",
    "web-wechat-login": "^1.0.9",
    "yup": "^0.26.6"
  },
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-3": "^6.24.1",
    "copy-webpack-plugin": "^4.6.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^2.26.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "path": "^0.12.7",
    "url-loader": "^1.1.2",
    "webpack": "3.6.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "2.11.3"
  }
}

src/index.html:

(src / index.html：)

<html lang="en">
<head>
    <base href="/" />
    <meta charset="UTF-8">
    <meta
            name="viewport"
            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
    >
    <title>dashboard</title>
    <link rel="shortcut icon" href="assets/favicon.ico">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <!--<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

    <style>
        a { cursor: pointer; text-decoration: none }
        .help-block { font-size: 12px; }
        body{
            margin: 0;
            /*background-color: #f5f5f5;*/
            background-color: #232122;
        }

    </style>

    <!-- Hotjar Tracking Code for https://www.dashboard.mltrons.com -->
<script>
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:1317845,hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>


</head>
<body>
    <div id="app"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.35/go.js"></script>-->
    <script src="assets/js/go.js"></script>
    <script src="assets/js/extension.js"></script>

<script src="https://static.landbot.io/landbot-widget/landbot-widget-1.0.0.js"></script>

</body>
</html>

src/index.jsx:

(src / index.jsx：)

import { render } from 'react-dom';
import { Provider } from 'react-redux';

import { store } from './_helpers';
import { App } from './App';


render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('app')
);

If u need anything else please let me know.thanks

(如果您还有其他需要，请告诉我。谢谢)

  ask by Abdullah Saud translate from so

Answer 1

You should add all of webpack.optimize plugins only in production.

(您应该仅在生产中添加所有webpack.optimize插件。)

Turn it off in development and it will take a little less time.

(在开发中将其关闭，将花费更少的时间。)

if (PRODUCTION) {
  config.plugins.push(
  ...your optimize plugins here
  );
}