In ECMAScript, export and import are objects with predefined values when we use the export default method. This means that when we import a new component, this component is already being pointed to the default export of that file.
To carry out the lazy loading process, we need to pass a function that will be executed at runtime, and the return of that function will be the part of the code that webpack divides in the bundling process.
When we call this function in vue-router, instead of the direct component import, vue-router does a validation check that the present component import is a function and needs to be executed. After the execution of the function, the response is used as the component that will be displayed on the user's screen.
Because the webpack import() method is asynchronous, this process can happen alongside other code execution, without tempering or blocking the main thread of the JavaScript VM.