webpack 4 代码拆分如何工作?是否有隐藏代码为下一个块发出 http 请求?

How webpack 4 code splitting work? Is there a hidden code which makes a http request for next chunk?

我正在尝试了解 Webpack 4 代码拆分的工作原理。是否有隐藏代码为下一个块发出 http 请求?

跟进问题:如果我在 login.js(登录页面)和 app.js(实际应用程序)之间拆分代码,是否有可能拦截来自 login.js 的下一个块的调用并根据身份验证是否成功,如果成功则提供 app.js 或在身份验证失败时提供 error.js?

I am trying to understand how Webpack 4 code splitting works under the hood. Is there a hidden code which makes a http request for next chunk?

是的,有 webpack 逻辑可以为我们处理。你只是不需要关心它。

If I split code between login.js(login page) and app.js(actual app), is it possible to intercept the call from login.js for next chunk and based on successful authentication or not, serve app.js if successful or serve error.js on failed authentication?

这完全有可能,看你怎么做。代码拆分是通过动态导入完成的,换句话说,它的工作原理是一样的,但是会标记为 webpack 导入的代码,说明它应该稍后下载。

动态导入需要 @babel/plugin-syntax-dynamic-import。要为 webpack 标记它,你 import('path.to.file') 你就满足了。这会生成一个承诺,您需要解决该承诺并用它做任何您需要的事情。

Webpack v4 有最新升级。以前如果我们做代码拆分,你可以在浏览器的 devTools 中看到 *(index)* 中 main.bundle.js 的 initiator 表示 index.html请求 main.bundle.js。然后从bootstrap_a877….(a script)加载所有脚本 这是负责异步加载文件的Webpack脚本。当您使用 Webpack 的动态导入功能时,此脚本会自动添加到构建中。

但是在 webpack v4 中,我们有 runtimeChunk,它实际上成为所有 bundle 的发起者。你可以在你的开发工具中看到它。它通常基于路由。

为了更好的代码拆分,请像这样构造您的组件,如果身份验证失败,您应该路由到下一个路由,这样它就不会被动态导入。

希望对您有所帮助。