About vue asynchronous component loading, webpack packages to generate .js files, and browsers load .js files.

in the following code, there are two problems that can"t be understood after reading the document several times.

component: r => require.ensure([], () => r(require("../page/item/item.vue")), "item")
What exactly is the use of the first parameter

1.require.ensure ()? What is the basis for browsers to load .js module files?

The

webpack document interprets the first two parameters of require.ensure () as follows:

dependencies: A set of strings that declare all the modules required by the code to be executed by callback.
the function that webpack will execute after the callback: loads the dependency. The implementation of the require function is sent to this function as an argument. The function body can use it to further require () the required modules.

the callback here says that it is executed after the dependency is loaded, that is, it executes callback after loading dependencies, so why do we usually pass an empty array with the first parameter? Since dependencies is empty, doesn"t it mean that callback, is executed without loading anything, so what is the basis for webpack to generate module files .js files?

The

require () method is an import component. I think there must be a module file .js file in the browser before you can call the require () method to import the component, right? However, apart from declaring the component path, that I need in the parameters of the require method, how does the browser know in advance which module file .js file I need?

When exactly is the

2.resolve callback called?

by looking at the vue documentation, I probably know that the component will call the factory function in component when rendering, but the document says:

The
resolve callback function will be called when you get the component definition from the server

I don"t quite understand when "when you get the component definition from the server"?

Why should the

component definition be obtained from the server? Is the .js file generated by the webpack package stored on the server? Does getting the component definition refer to the time when the module file .js file is loaded? If so, then the above line of code as an example, I didn"t even tell webpack which module I need (I only know which module I need in the resolve callback method, while resolve is called after the module file .js has finished loading. How does), webpack know which module to load?

I have been dizzy these days. I have read a lot of blog documents and haven"t figured out the connection. I hope someone can help me. Thank you very much!


of course you can write this way, but now the solution given in the latest vue document is to use dynamic import

.
Menu