Случайные куски при использовании реагирующей загрузки для разделения кода - PullRequest
0 голосов
/ 14 марта 2019

Я использую 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.

Когда я создаю приложение, я получаю свои именованные чанки, как и ожидалось, но я также получаю кучу случайных нумерованных чанков:

enter image description here

Кажется, что эти другие блоки содержат такие вещи, как moment.js, react-select, есть еще одна, содержащая react-dom, которая наверняка будет просто включена на каждую страницу?

Я хотел бы знать, почему это происходит, и как я могу назвать эти куски или объединить их с кусками страницы?

...