How to use import for routing lazy loading in Vue

This article mainly introduces the relevant knowledge of how to use import for routing lazy loading in Vue, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will have something to gain after reading this Vue article on how to use import for routing lazy loading. Let's take a look.

The principle of routing lazy loading using import

First, let's talk about the difference between import and require.

The most important idea in node programming is modularity. Both import and require are used by modularization.

(1) follow the norms

Require is the way to introduce AMD specification.

Import is a syntax standard of es6, which must be converted into es5 syntax if it is to be compatible with browsers.

(2) call time

Require is called at run time, so require can theoretically be used anywhere in the code

Import is called at compile time, so it must be placed at the beginning of the file

(3) essence

Require is an assignment process. In fact, the result of require is an object, a number, a string, a function, etc., and then assign the result of require to a variable

Import is a deconstruction process, but at present, none of the engines have implemented import. We use babel in node to support ES6, and we just transcode ES6 to ES5 and then execute it, and the import syntax will be transcoded to require.

How do we use lazy loading in routing?

Export default new VueRouter ({routes: [{path:'/', component: () = > import ('.. / components/Navigator')}]})

Using route lazily loading, you will only go to component when you enter the current route, and then run import compilation to load the corresponding components.

It is understandable and also through the resolve mechanism of Promise. Because the Promise returned by the Promise function is the resolve component itself, and we can use import to import the component.

Note: import returns a Promise object.

SetTimeout (() = > {import ('. / dynamic-data.js'). Then (res = > {console.log (res.default.message)})}, 1500) / / dynamic-data.jsexport default {message: 'this is message'} vue routing is loaded lazily and cannot be handled with import

Cause of the problem: import is an asynchronous reference component and requires special babel-loader processing

Resolve npm I babel-plugin-syntax-dynamic-import-D

Introduce the syntax-dynamic-import plug-in in .bablerc

{"presets": ["env"], "plugins": ["syntax-dynamic-import"]} this article on "how to use import for routing lazy loading in Vue" ends here. Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to use import for routing lazy loading in Vue". If you want to learn more, you are welcome to follow the industry information channel.