Vue + webpack for asynchronous component loading method, vuewebpack

Vue + webpack for asynchronous component loading method, vuewebpack

8.9 update: When I wanted to migrate to csdn, I had not transferred my blog because of the invitation code. So I ran to the blog Park. Today I found that csdn has helped me move my article, it is necessary to revise this article.

I was confused when I was writing this article because I was new to vue.

----------------/* The following can be skipped */-----------------

It was a very simple task for a long time.

1. the vue document only provides Vue. component ('comp _ name', function (resolve, reject) {}) is an example of ajax loading component definition content in the callback, but I am used to it now. the vue file write component. Click route to obtain the component. what can I do with vue?

2. The coding-split of webpack supports the commonjs/amd syntax, which has different implementations. I checked n cases on the Internet, and finally confirmed the two methods.

Commonjs Syntax: const setting = resolve => require. ensure ([], () => resolve (require ('. /components/setting. vue '), 'setting ');

Document Writing: resolve => require (['./components/setting. vue')], resolve); // lazy loading

At that time, I used the routing exercises. The first one I used was require, which I saw on github. ensure is the webpack syntax. the specified code in the ensure section is cut and packaged on another chunk, webpack. config. add the chunkFileName entry to js. The three parameters of require. ensure are: Dependent url, callback, and custom chunk name.

In fact, code split is essentially to separate your require module and package it separately. When used, the browser initiates asynchronous retrieval and inserts it into the head in the form of scriptdom, this is its underlying implementation. When I try it myself, every time I get an asynchronous component, two tags will be inserted in the head, one script, and the yigestyle, because the. vue file will eventually be parsed into html, css, and js.

PS: in fact, the sample code on the webpack official website does not use the resolve => method, which is directly in the function require. ensure is enough. At the beginning, I was a little confused. I couldn't find an explanation on the Internet. I found require through my own research. ensure Function, after webpack is packaged and compiled

Is a _ webpack_require _. e function, which is a thenable instance, require. put the ensure callback to _ webpack_require _. e. in then (fn), this sub-statement is obvious. The webpack syntax itself should be a promise instance, but in the above method of getting the vue component, because require. ensure is the encapsulated syntax, so you have to pass resolve into its parent function, in require. the ensure callback is obtained and called through the scope chain. This also reveals that the resolve function does not have to be included in promise's function parameters, and its appearance location can be set flexibly, as mentioned in the ES6 entry of instructor Ruan Yifeng, the resolve function is provided by the js engine and does not need to be deployed by yourself.

------------------/* Or above can be skipped */------------------

First of all, the use of asynchronous components is not as complicated as I thought when I first came into contact.

1. If you can use the official website:

HTML:

<Input type = "button" @ click = "showchild" value = "show"> // after you click the button, show is true. Obtain the child component first, render the div content <div id = "contain" v-if = "show"> <child> </div>

JS:

//...data () {  return {   msg: 'Welcome to Your Vue.js App',   show:false  } }, methods: {  showchild:function(){   this.show=true;   } }, components: {   'child': function(resolve) {    require(['./components/child.vue'], resolve); }

* Note: When loading asynchronous components, do not ignore. vue behind the component name.

This example should be more intuitive. After clicking the button, the Boolean value of show variable is changed to true. Because child. vue is an asynchronous component, ajax gets the component and then renders it.

In many cases, asynchronous components are used together with vue-router to switch views. In fact, all the syntaxes can be used at this time.

The above vue + webpack Method for asynchronous component loading is all the content I have shared with you. I hope to give you a reference and support for the customer's house.