Я использую 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
, которая наверняка будет просто включена на каждую страницу?
Я хотел бы знать, почему это происходит, и как я могу назвать эти куски или объединить их с кусками страницы?