使用react-loadable拆分代码时的随机块

Question

我正在使用react-loadable拆分我的代码。我选择从路由级别开始。我的routes.js看起来像这样：

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Loadable from 'react-loadable';

const Loading = props => {
  if (props.error) {
    return <div>Error loading page!</div>;
  } else {
    return null;
  }
};

const AsyncHomepage = Loadable({ loader: () => import('../Scenes/Homepage/Homepage' /* webpackChunkName: "homepage" */), loading: Loading });
const AsyncSearchPage = Loadable({ loader: () => import('../Scenes/Search/Search' /* webpackChunkName: "search" */), loading: Loading });
const AsyncAboutUsPage = Loadable({ loader: () => import('../Scenes/AboutUs/AboutUs' /* webpackChunkName: "aboutus" */), loading: Loading });

// omitted for brevity

export const Routes = () => {
  return (
    <Switch>
      <Route exact path="/" component={AsyncHomepage} />
      <Route exact path="/search" component={AsyncSearchPage} />
      <Route exact path="/about-us" component={AsyncAboutUsPage} />

      // omitted for brevity
    </Switch>
  );
};

这是我正在使用的唯一react-loadable。

构建应用程序时，可以按预期方式获取命名的块，但也可以获取一堆随机编号的块：

这些其他块似乎包含moment.js，react-select之类的东西，还有另一个包含react-dom的东西，肯定会包含在每个页面中吗？

我想知道为什么会发生这种情况，如何命名这些块或将其与页面块合并？