Разделение кода и динамическая загрузка в Webpack 4 с реагирующей загрузкой - PullRequest
Новая
       27

Разделение кода и динамическая загрузка в Webpack 4 с реагирующей загрузкой

0 голосов
/ 15 ноября 2018

Итак, у меня есть приложение webpack 4 реакции, которое состоит из 2 частей:

  • Компонент входа в систему
  • Остальная часть приложения

My rout.jsвыглядит так: 

import React from 'react';
import Home from 'Home';

....

const LoadableLoginComponent = Loadable({
    loader: () => import('LoginComponent'),
    loading() {
        return <div>Loading...</div>
    }
});

.....

render() {
        if (!this.loggedIn) {
            return (
                <LoadableLoginComponent />
            );
        }

        return (
            <Home />
        );
    }

Мой веб-пакет генерирует 2 js-файла bundle.min.js и 0.min.js

Я предположил, что по умолчанию, если пользователь не вошел в систему толькокомпонент входа будет загружен с 0.min.js, и если пользователь войдет в систему, загрузится остальная часть приложения, но я вижу, как загружаются оба bundle.min.js и 0.min.js.

1 Ответ

0 голосов
/ 15 ноября 2018

Если у вас есть оператор if (! This.loggedIn) в комплекте без входа в систему, который имеет возможность рендеринга компонента входа в систему, то компонент входа будет включен в ваш пакет без входа в систему. Это связано с тем, что точка входа для вашего пакета, не входящего в систему, ищет все возможные пути кода и файлы, которые могут ему понадобиться, и связывает их вместе, даже если ваш оператор if всегда терпит неудачу и никогда не использует компонент Login.

...