Почему webpack4 упакован так?

Question

Я настроил конфигурацию веб-пакета, но результаты не такие, как я думал. Я проверил много информации в Интернете, и нет четких объяснений. Пожалуйста, помогите мне увидеть это. Большое спасибо.

webpack config

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const Autoprefixer = require('autoprefixer');
const {
  BundleAnalyzerPlugin
} = require('webpack-bundle-analyzer');

module.exports = env => {

  const rules = [
    {
      test: /\.(js|jsx)$/,
      loader: 'babel-loader',
      exclude: /node_modules/
    },
    {
      test: /\.(jpg|jpeg|png|gif|svg)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 100000
          }
        }
      ]
    },
    {
      test: /\.css$/,
      use: [
        env.NODE_ENV === 'development'
          ? 'style-loader'
          : MiniCssExtractPlugin.loader,
        'css-loader'
      ]
    },
    {
      test: /\.less$/,
      use: [
        env.NODE_ENV === 'development'
          ? 'style-loader'
          : MiniCssExtractPlugin.loader,
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: [Autoprefixer()]
          }
        },
        'less-loader'
      ]
    }
  ];

  const plugins = {
    development: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html',
        injetc: 'body'
      }),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NamedModulesPlugin(),
      new BundleAnalyzerPlugin()
    ],
    production: [
      new CleanWebpackPlugin(['dist']),
      new MiniCssExtractPlugin({
        filename: '[name].min.css'
      }),
      new OptimizeCssAssetsWebpackPlugin(), 
      new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html',
        injetc: 'body'
      })
    ],
    test: [new BundleAnalyzerPlugin()]
  };

  const webpackConfig = {
    entry: {
      index: './src/index.js'
    },
    devtool: 'nosources-source-map',
    output: {
      filename: '[name].[hash].js',
      chunkFilename: '[name].chunk.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [...rules]
    },

    optimization: {
      runtimeChunk: {
        name: 'manifest'
      },
      splitChunks: {
        maxAsyncRequests: 10,

        cacheGroups: {
          default: false,

          common111: {
            chunks: 'all',
            minChunks: 2,
            minSize: 1,
            priority: 0
          },

          test: {
            test: /react/,
            chunks: 'all',
            minSize: 1,
            minChunks: 1,
            priority: 10
          }
        }
      }
    },


    plugins: [
      new webpack.DefinePlugin({
        NODE_ENV: JSON.stringify(env.NODE_ENV)
      }),
      ...plugins[env.NODE_ENV]
    ]
  };


  if (env.NODE_ENV === 'development') {
    webpackConfig.devServer = {
      hot: true,
      hotOnly: true
    };
  }
  return webpackConfig;
};

Код проекта

import React from 'react';
import ReactDOM from 'react-dom';
import {
  HashRouter as Router,
  Redirect,
  Switch,
  Route
} from 'react-router-dom';
// import Home from './pages/Home/index';

import 'antd/dist/antd.css';

const Home = React.lazy(() =>
  import(/* webpackChunkName: "home" */'./pages/Home/index')
);

class App extends React.Component {
  shouldComponentUpdate() {
    return true;
  }

  render() {
    return (
      <div>
        <React.Suspense fallback={<div>123</div>}>
          <Router>
            <Switch>
              <Route
                exact
                path="/"
                render={() => <Redirect to="/home" />}
              />
              <Route path="/home" render={() => <Home />} />
              <Redirect to="/" />
            </Switch>
          </Router>
        </React.Suspense>
      </div>
    );
  }
}

const dom = document.getElementById('root');

ReactDOM.render(<App />, dom);

домашний компонент

import React from 'react';
import { Route, NavLink } from 'react-router-dom';
import { Layout, Menu } from 'antd';

const Discover = React.lazy(() => import(/* webpackChunkName: "Discover" */'../Discover'));
const Visilize = React.lazy(() => import(/* webpackChunkName: "Visilize" */'../Visilize'));
const Dashboard = React.lazy(() => import(/* webpackChunkName: "Dashboard" */'../Dashboard'));
const Data = React.lazy(() => import(/* webpackChunkName: "Data" */'../Data'));
const Alarm = React.lazy(() => import(/* webpackChunkName: "Alarm" */'../Alarm'));
const { SubMenu } = Menu;
const { Header, Sider, Content } = Layout;

      <Content>
            <Route
              path="/home/discover"
              render={() => <Discover />}
            />
            <Route
              path="/home/visilize"

              render={() => <Visilize />}
            />
            <Route
              path="/home/dashboard"

              render={() => <Dashboard />}
            />
            <Route
              path="/home/data"

              render={() => <Data />}
            />
            <Route
              path="/home/alarm"

              render={() => <Alarm />}
            />
          </Content>

ключевая конфигурация

 cacheGroups: {
         default: false,

         common111: {
           chunks: 'all',
           minChunks: 2,
           minSize: 1,
           priority: 0
         },

         test: {
           test: /react/,
           chunks: 'all',
           minSize: 1,
           minChunks: 1,
           priority: 10
         }
       }

Но результат в том, что введите описание изображения здесь

мой вопрос первый: почему только реагирующий-реагирующий-индекс, ничто иное, обнаружение, визуализация, данные, эти chunksl, почему не реагирует.data.js, то же самое, почему асинхронный только домашний, домашний компонент имеет асинхронный, нет два: почему существует файл домашнего производителя, и он очень большой, как это происходит