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

Question

所以我有一个包含 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 正在加载。

Answer 1

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