Background: As projects get larger and larger, performance issues have become an important factor that bothers business development. The core page has become overwhelmed and the access speed has become slower and slower as the functions continue to accumulate. Business development, user experience are very urgent need to release the load of the page, improve the page loading speed.

I have been looking for an elegant implementation of front-end modularization and asynchronous loading according to the priority order of weight. Suddenly I learned about Vue’s asynchronous component, so I studied and practiced it.

First take a look at the introduction of asynchronous components on the official website:



Well, it’s a quick introduction, but this feature really blew my mind, so let’s go to the code and see how it works:

Webpack simple setup and engineering structure



Simple Webpack + Vue configuration

var webpack = require('webpack'); }, output: {path: './dist/', filename:}; exports = {watch: true, // exports = {'./ SRC /index.js',}, output: {path: '. '[name]. Min. Js, publicPath:'/dist/'}, the module: {loaders: [{test: / \. Vue $/, / / parsing vue template loader: "Vue-loader"}, {test: /\.js$/, //js conversion: /(node_modules)/, loader: "babel-loader", query: {presets: [' es2015]}}, {test: / \. CSS $/, / / CSS conversion loader: 'vue - style! CSS'}]}, vue: {loaders: {CSS: 'vue - style! css', } } };

Entry JS file:

import Vue from 'vue';
import Frame from './index.vue';
let app = new Vue({
    el: '#app',
    render: h => h(Frame),
});

Framework file:

<template> <div> asynchronous component test after clicking the button first delay 300 milliseconds, <template v-if="show"> <later></later> < LATER2 ></ LATER2 ></ template> <button @click="toggle"> </button> </div> </template bb3 <script> import Vue from 'Vue '; const later = Vue.component('later', function (resolve) { setTimeout(function () { require(['./later.vue'], resolve) }, 3000); }); const later2 = Vue.component('later2', function (resolve) { require(['./later2.vue'], resolve) }); export default{ data: function () { return { show: false }; }, components: { later, later2, }, created: function () { }, mounted: function () { }, computed: {}, methods: { toggle:function () { this.show = ! this.show; } }, } </script> <style> </style>

Server Asynchronous Component 1:

<template>
<div>
    load me later 11111
</div>
</template>
<script>
export default{
    data: function () {
        return {};
    },
    components: {},
    created: function () {
    },
    mounted: function () {
    },
    computed: {},
    methods: {},
}
</script>
<style>
</style>

Server Asynchronous Component 2:

<template>
<div>
    load me later 22222
</div>
</template>
<script>
export default{
    data: function () {
        return {};
    },
    components: {},
    created: function () {
    },
    mounted: function () {
    },
    computed: {},
    methods: {},
}
</script>
<style>
</style>

OK, let’s run and see what happens!!

1. Refresh the page and load the framework



2. Click Load. Asynchronous component 2 will be loaded from the server immediately and rendered



3. Click Load, 3000 milliseconds later, at which point Asynchronous Component 1 is triggered to load from the server and render

With this feature, we can do a lot of front-end optimizations. For example, the core functions of the page (audio, video, articles, goods, etc.) are packaged into a core module and loaded first through the framework. Some other peripheral functions are packaged and loaded asynchronously by the server, so as to solve the problems of difficult maintenance and slow access caused by increasing business demands.

At this point, the smart friends must be thinking, since it is asynchronous loading, there will be loading process (in the process of loading), and loading failure and other abnormal circumstances. At this time how to do, a state to maintain it? No!

Let’s take a look at another feature on the website:

I believe that after the use of the above tutorial, we can see the advanced asynchronous components at a glance and will use, is not very perfect!!

With a little more research, we’re ready to put it into production.