Webpack 4 中的代码拆分和动态加载以及可加载的反应答案

【问题标题】：Code splitting and dynamic loading in Webpack 4 with react loadableWebpack 4 中的代码拆分和动态加载以及可加载的反应
【发布时间】：2018-11-14 23:54:19
【问题描述】：

所以我有一个包含 2 个部分的 webpack 4 react 应用程序：

登录组件
应用程序的其余部分

我的 routes.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 />
        );
    }

我的 webpack 生成了 2 个 js 文件 bundle.min.js 和 0.min.js

我的假设是，默认情况下，如果用户未登录，则仅登录组件将加载 0.min.js，如果用户已登录，则应用程序的其余部分将加载但我看到 bundle.min.js 和 0.min.js 都在加载。

【问题讨论】：

标签： reactjs webpack webpack-4 code-splitting react-loadable

【解决方案1】：

如果您在非登录包中有一个 if 语句 (!this.loggedIn) 可以呈现登录组件，那么登录组件将包含在您的非登录包中。这是因为您的非登录包的入口点会搜索它可能需要使用的所有可能的代码路径和文件并将它们捆绑在一起，即使您的 if 语句总是失败并且从不使用登录组件。

【讨论】：