我的React网站中的React可加载问题

Question

有人可以在我的React网站上为我解决问题吗？

每当我们将react-loadable部署到生产环境中时，我们都会在页面上使用react-loadable，而网站会卡在加载部分。以下是网址

可加载的网址：http://fcastage.surge.sh/

任何帮助将不胜感激。

我们尝试使网站使用react loadabale且没有react loadable。但是要使网站快速运行并分块加载，我们必须使用loadable。可加载的react可以在开发环境中正常工作，但是当我切换到生产环境时，它不能正常工作。

以下是用于生产的配置文件

const HtmlWebpackPlugin = require("html-webpack-plugin");
//const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const path = require("path")
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { ReactLoadablePlugin } = require('react-loadable/webpack')


const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  mode: "production",
  entry: "./app/index.js",
  output: {
    path: path.resolve(__dirname, "./build"),
    filename: '[name].bundle.js',
    chunkFilename: '[name].js',
  },


  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader")
      },
      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            {
              //because remove style-loader,my css can't work
              loader: "css-loader",
              options: {
                importLoaders: 1,
                modules: true,
                localIdentName: "[local]"
              } // translates CSS into CommonJS
            },
            {
              loader: "less-loader" // compiles Sass to CSS
            }
          ]
        })
      },
      {
        test: /\.(jpe?g|png|gif|svg|ico)$/i,
        use: [
          {
            loader: "url-loader",
            options: {
              outputPath: "assets/",
              limit: 10 * 1024
            }
          }
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf)$/i,
        use: [
          {
            loader: "url-loader",
            options: {
              outputPath: "assets/"
            }
          }
        ]
      }  


    ]
  },
  optimization : {
    splitChunks: {
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        }
      }
    }
    // minimizer: [
    //   new UglifyJsPlugin({
    //     uglifyOptions: {
    //       compress: {
    //         unused: true,
    //         dead_code: true,
    //         warnings: false
    //       }
    //     },
    //     sourceMap: true
    //   }),
    // ]

  },

  plugins: [
    new HtmlWebpackPlugin({
      template: "./app/index.html",
      hash: true,
      filename: "index.html"
    }),
    //for surge.sh
    new HtmlWebpackPlugin({
      template: "./app/index.html",
      hash: true,
      filename: "200.html"
    }),

    new CleanWebpackPlugin(),
    new ExtractTextPlugin("main.css"),
    new webpack.DefinePlugin( {'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    'process.env.DEBUG': JSON.stringify(process.env.DEBUG) } ),

    new ReactLoadablePlugin({
      filename: path.resolve(__dirname, "build/react-loadable.json")
    })
  ],
};