在Webpack生产版本上反应延迟加载ChunklLoadError

Question

我正在使用React延迟加载，以便动态加载我的组件和一些antd图标。 它在开发环境中运行良好。但是在尝试加载组件时，页面上出现了ChunkLoadError。但是，当我删除所有延迟加载时，它工作正常。

这里的代码示例：

const ProtectedRoute = lazy(() => import('./ProtectedRoute'));
const Login = lazy(() => import('../examples/AnimatedLoginForm'));
const Home = lazy(() => import('./Home'));
const Account = lazy(() => import('./Account'));

const Router = () => {
  return (
    <BrowserRouter>
      <MainLayout>
        <Suspense fallback={<Spinner />}>
          <Switch>
            <Route exact path="/login" component={Login} />
            <ProtectedRoute exact path="/" component={Test} />
            <ProtectedRoute path="/form" component={Home} />
            <ProtectedRoute path="/settings" component={Settings} />
            <ProtectedRoute path="/account" component={Account} />
          </Switch>
        </Suspense>
      </MainLayout>
    </BrowserRouter>
  );
};

还有我的webpack.config.js：

const path = require('path');
const webpack = require('webpack');
const dotenv = require('dotenv');
const fs = require('fs');
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');

module.exports = ({ ENVIRONMENT }) => {
  // Get the root path (assuming your webpack config is in the root of your project!)
  const currentPath = path.join(__dirname);

  // Create the fallback path (the production .env)
  const basePath = `${currentPath}/.env`;

  // We're concatenating the environment name to our filename to specify the correct env file!
  const envPath = `${basePath}.${ENVIRONMENT}`;

  // Check if the file exists, otherwise fall back to the production .env
  const finalPath = fs.existsSync(envPath) ? envPath : basePath;

  // Set the path parameter in the dotenv config
  const fileEnv = dotenv.config({ path: finalPath }).parsed;

  // Reduce it to a nice object, the same as before (but with the variables from the file)
  const envKeys = fileEnv
    ? Object.keys(fileEnv).reduce((prev, next) => {
        const state = prev;

        state[`process.env.${next}`] = JSON.stringify(fileEnv[next]);
        return state;
      }, {})
    : {};

  return {
    entry: { app: './src/index.jsx' },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /(node_modules|bower_components)/,
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: [
              [
                'import',
                { libraryName: 'antd', libraryDirectory: 'es', style: true }
              ]
            ]
          }
        },
        {
          // CSS imports
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        },
        {
          test: /\.less$/,
          use: [
            { loader: 'style-loader' },
            { loader: 'css-loader' },
            {
              loader: 'less-loader',
              options: {
                modifyVars: {},
                javascriptEnabled: true
              }
            }
          ]
        },
        {
          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
          use: [
            {
              loader: 'babel-loader'
            },
            {
              loader: '@svgr/webpack',
              options: {
                babel: false,
                icon: true
              }
            }
          ]
        },
        {
          // Images imports
          test: /\.(png|jpg|gif)$/,
          use: ['file-loader']
        },
        {
          // Fonts imports
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          use: ['file-loader']
        }
      ]
    },
    resolve: { extensions: ['*', '.js', '.jsx'] },
    output: {
      path: path.resolve(__dirname, 'dist'),
      publicPath: '/dist/',
      filename: '[name].bundle.js'
    },
    devServer: {
      contentBase: path.join(__dirname, 'public/'),
      port: 3000,
      publicPath: 'http://localhost:3000/dist/',
      historyApiFallback: true,
      hotOnly: true
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.DefinePlugin(envKeys),
      new AntdDayjsWebpackPlugin()
    ]
  };
};

还有我的.babelrc

{
  "presets": [
    "@babel/env",
    "@babel/preset-react"
  ],
  "plugins": [
    "syntax-dynamic-import"
  ]
}

我尝试了很多事情，没有任何效果，请帮助我。