Question

所以我有一个webpack 4 react app，它包含2个部分：

登录组件
其他应用

我的route.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语句始终失败并且从不使用登录组件。

Webpack 4中的代码拆分和动态加载以及React加载

1 个答案: