Реагирование на ленивое кодирование включает в себя зависимости от выгруженных компонентов в корневом комплекте - PullRequest
Новая
       12

Реагирование на ленивое кодирование включает в себя зависимости от выгруженных компонентов в корневом комплекте

0 голосов
/ 04 апреля 2019

Я экспериментировал с функцией ленивого разделения кода в React, как описано здесь: https://reactjs.org/docs/code-splitting.html, но я вижу неожиданное поведение, которое мне нужно, чтобы помочь понять и исправить.

Вот мои маршрутыфайл, который запускает разделение кода: 

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';

const APage = lazy(() => import(/* webpackChunkName: "APage" */ '../pages/APage'));
const BPage = lazy(() => import(/* webpackChunkName: "BPage" */ '../pages/BPage'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/a" component={APage}/>
        <Route exact path="/b" component={BPage}/>
      </Switch>
    </Suspense>
  </Router>
);

Когда я создаю для производства, он генерирует 4 файла: 

app.js    // the main bundle, includes react, react-dom, etc.
APage.js  // contains only code needed to render APage
BPage.js  // contains only code needed to render BPage
APage~BPage.js // contains components shared by APage and BPage

Это работает, как ожидается, и может отображать оба маршрута.

Однако, когда я добавляю импорт в свой компонент APage, например: 

import React, { Component } from 'react';
import { usefulFunction } from '../lib/utils';

export default class LpAPage extends Component {
  componentDidMount() {
    usefulFunction();
  }

  render() {
    return (
      <h1>Landing Page A</h1>
    )
  }
}

Код для usefulFunction заканчивается в основном комплекте (app.js), и онвключается в первоначальную загрузку независимо от используемого маршрута.

Как я могу изменить этот код, чтобы usefulFunction включался только тогда, когда это необходимо - в блок APage.js?

...