Shulou(Shulou.com)06/02 Report--

Most people do not understand the knowledge points of this article "how to achieve demand loading in vue", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to achieve demand loading in vue" article.

In vue, demand loading, also known as delayed loading or lazy loading, is to load resources as needed; the implementation of vue projects can be loaded in three ways: vue asynchronous component technology, import () of es proposal, and "require.ensure ()" provided by webpack.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Demand loading, also known as deferred loading or lazy loading, loads resources as needed and will only be loaded when used.

Why do you need to load on demand?

With the development of the Internet, a web page needs to carry more and more functions. For websites that use single-page application as the front-end architecture, they will face the problem of a large amount of code that a web page needs to load, because many functions are concentrated in a HTML. This will lead to slow web page loading, interactive stutters, and a very poor user experience.

The root cause of this problem is to load the code corresponding to all functions at once, but in fact, users can only use some of them at each stage. So the way to solve the above problem is to load only the code corresponding to this function, that is, the so-called on-demand loading.

The method of realizing on-demand loading in vue Project

There are three ways to realize demand loading in vue project: vue asynchronous component technology, import () of es proposal, and require.ensure () provided by webpack.

Vue Asynchronous component Technology

Vue-router configures routing and uses the asynchronous component technology of vue to achieve on-demand loading. In this way, the next component generates a js file

Use case:

{path:'/ promisedemo', name: 'PromiseDemo', component: resolve = > require (['.. / components/PromiseDemo'], resolve)}

Import () of es proposal (recommended)

Webpack official documentation: use import () in webpack

Vue official documentation: routing lazy loading (using import ())

Use case:

/ / the following two lines of code do not specify webpackChunkName, and each component is packaged into a js file. Const ImportFuncDemo1 = () = > import ('.. / components/ImportFuncDemo1') const ImportFuncDemo2 = () = > import ('.. / components/ImportFuncDemo2') / / the following two lines of code, specifying the same webpackChunkName, will be merged and packaged into a js file. / / const ImportFuncDemo = () = > import (/ * webpackChunkName: 'ImportFuncDemo' * /'.. / components/ImportFuncDemo') / / const ImportFuncDemo2 = () > import (/ * webpackChunkName: 'ImportFuncDemo' * /'.. / components/ImportFuncDemo2') export default new Router ({routes: [{path:'/ importfuncdemo1', name: 'ImportFuncDemo1', component: ImportFuncDemo1} {path:'/ importfuncdemo2', name: 'ImportFuncDemo2', component: ImportFuncDemo2}]})

Require.ensure () provided by webpack

Vue-router configures routing, uses webpack's require.ensure technology, and can also load on demand.

In this case, multiple routes that specify the same chunkName are merged and packaged into a single js file.

Examples are as follows:

{path:'/ promisedemo', name: 'PromiseDemo', component: resolve = > require.ensure ([], () = > resolve (require ('.. / components/PromiseDemo')), 'demo')}, {path:' / hello', name: 'Hello', / / component: Hello component: resolve = > require.ensure ([], () = > resolve (require ('.. / components/Hello') 'demo')} this is the content of the article on "how to implement demand loading in vue" I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.