在满足条件之前，如何防止下载预定义的 webpack 包块？答案

【问题标题】：How to prevent downloading pre-defined webpack bundle chunks until a condition is met?在满足条件之前，如何防止下载预定义的 webpack 包块？
【发布时间】：2022-06-20 22:58:25
【问题描述】：

我有一个使用 webpack(v5) 的反应应用程序。在此应用程序中，webpack SplitChunks plugin 用于将捆绑包拆分为多组文件。我需要在身份验证发生之前停止加载一些捆绑包。因为此时下载不需要的 js 文件进行身份验证检查的成本很高，因为如果身份验证不成功，它必须 http 将用户重定向到登录页面（不是使用 react 开发的）。

因此，由于这些块在项目构建阶段作为脚本标签添加到 index.html 页面，有什么方法可以用来实现我的要求。

PS：此时触发了一个http事件，认证成功的时候也是如此，也可以使用。此外，可以通过通配符来预先定义块集，因为哈希也被添加到文件名中。

【问题讨论】：

你查看Code Splitting了吗？它会拆分代码并仅在必要时交付。
是的@CaioMars。在这种情况下，它需要将所有反应页面中的几乎每个导入都更改为延迟加载，这在 atm 是不可行的，因为初始身份验证检查只需要其中的几个。 :)
我明白了。好吧，我不知道它有多可行，但也许你可以将路由器分成两个路由组件并在它们上使用代码拆分？

标签： javascript reactjs webpack optimization html-webpack-plugin

【解决方案1】：

这已经通过有条件地延迟Webpack SplitChunks plugin 生成的一些块进行了测试。但是，这会破坏应用程序，因为应用程序正常运行所需的所有块。我们能想到的唯一选择就是代码拆分和延迟加载。

希望这会帮助尝试相同用例的人。

【讨论】：