Question

我是webpack和React的新手。

我有一个带登录页面的应用。用户登录然后开始使用app。

但注册页面加载时间过长。在bundle.js文件完全加载之前，没有任何内容出现。我不想只为一个登录页面加载整个bundle.js。

我已经在body标签中的index.html中实现了bundle.js。我还使用了异步和延迟属性，但没有用。

<script src="/bundle.js?query=1.0.21"></script>

有什么想法吗？

Answer 1

您需要使用code splitting，这在使用webpack时非常容易实现。想要为Web应用程序的每个部分创建一个单独的包，这是有意义的。在您的情况下，它可能是一个只处理登录页面的捆绑包，因此它非常小，可以快速加载，并为您的应用程序的其余部分添加一个捆绑包。

您也可以在其他几个捆绑包中对其进行分解，例如每个路由一个捆绑包，或者对于某些较重的组件使用lazy loading，这会在您的应用程序使用该组件时自动加载特定的js。