npm start 和在 react 中编译的问题

Question

所以我被指派维护一个反应网站。我在运行项目时遇到了一些问题。npm start 大约需要 4-5 分钟，同样，保存的每个更改都需要 2-3 分钟（太长了）。我无法弄清楚问题出在哪里。也许在 webpack 配置或其他东西中。代码详情如下：

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：

  "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:

<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：

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')
);

如果你还需要什么，请告诉我。谢谢

Answer 1

您应该只在生产环境中添加所有 webpack.optimize 插件。在开发中关闭它，它会花费更少的时间。

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