webpack 4代码拆分如何工作？是否有隐藏代码使下一个块发出http请求？ [英] How webpack 4 code splitting work? Is there a hidden code which makes a http request for next chunk?

问题描述

我试图了解Webpack 4代码拆分的工作原理。

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?

接下来的问题：如果我在login.js（登录页面）和app.js（实际应用），是否有可能基于成功的身份验证而截取来自login.js的呼叫，是否基于成功的身份验证；如果成功，则提供app.js；如果身份验证失败，则提供error.js？

Follow up question: 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 v4 具有最新的升级。以前，如果我们进行代码拆分，则可以在浏览器的 devTools 中看到中main.bundle.js的启动器 *（index）* ，这意味着 index.html 请求了 main.bundle.js 。之后，所有脚本都从 bootstrap_a877…。加载（脚本）。这是Webpack脚本，负责异步加载文件。当您使用Webpack的动态导入功能时，该脚本会自动添加到内部版本中。

Webpack v4 has latest upgrades. Previously if we do code splitting, You can see in devTools of browser, the initiator of main.bundle.js in *(index)* which means index.html requested the main.bundle.js. Afterwards all scripts are loaded from bootstrap_a877…. (a script) This is the Webpack script that is responsible for asynchronously loading files. This script is added to the build automatically when you use Webpack’s dynamic import function.

但是在webpack v4中，我们有 runtimeChunk ，它实际上已成为所有捆绑软件的发起者。您可以在开发工具中看到它。

But in webpack v4 we have runtimeChunk which is actually becomes the initiator of all bundles. You can see it in your dev tools. It is usually based on routes.

为了更好地进行代码拆分，可以像这样对组件进行结构化，如果身份验证失败，则应路由到下一条路由，这样就不会动态导入该路由。 。

For better code splitting, Structure your component like that, if authentication gets failed you should route to next route so it will not be imported dynamically.

我希望这会有所帮助。

这篇关于webpack 4代码拆分如何工作？是否有隐藏代码使下一个块发出http请求？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！