vue异步组件(高级异步组件)使用场景及实践

最新推荐文章于 2023-08-31 16:32:17 发布

weixin_34138056

最新推荐文章于 2023-08-31 16:32:17 发布

阅读量1.3k

点赞数

文章标签： javascript 前端 webpack ViewUI

原文链接：https://segmentfault.com/a/1190000012138052

版权

背景介绍：
随着项目越来越大，性能问题已经成为了困扰业务发展的重要因素。
功能不停地累加后，核心页面已经不堪重负，访问速度愈来愈慢。
业务发展、用户体验都非常迫切的需要释放页面的负载，提高页面加载速度。

一直在寻找一个优雅的实现前端模块化、并能按权重的优先级顺序异步加载的实现方案。突然了解到vue的异步组件，于是便专门研究实践了一下。

首先看一下官网对异步组件的介绍：
异步组件.png
嗯，比较简单的介绍，不过这个特性确实是我眼前一亮，接下来就上代码，看看效果如何：
webpack简单设置以及工程结构
异步组件-工程.png
简单的webpack+vue配置

var webpack = require('webpack');
module.exports = {
watch: true,    //监听变化自动编译
entry: {
    'index': './src/index.js',
},
output: {
    path: './dist/',
    filename: '[name].min.js',
    publicPath:'./dist/'
},
module: {
    loaders: [
        {
            test: /\.vue$/, //解析vue模板
            loader: "vue-loader"
        },
        {
            test: /\.js$/, //js转换
            exclude: /(node_modules)/,
            loader: "babel-loader",
            query: {
                presets: ['es2015']
            }
        },
        {
            test: /\.css$/, //css转换
            loader: 'vue-style!css'
        }
    ]
},
vue: {
    loaders: {
        css: 'vue-style!css',
    }
}
};

入口js文件：

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

框架文件：

<template>
<div>
    异步组件测试
    点击按钮后
    第一个延迟300毫秒，从服务器加载
    第二个不延迟从服务器加载
    <template v-if="show">
        <later></later>
        <later2></later2>
    </template>
    <button @click="toggle">加载</button>
</div>
</template>
<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>

服务器异步组件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>

服务器异步组件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>

好，我们跑起来看看效果！！！

1、刷新页面，加载框架
第一步.png
2、点击加载，此时异步组件2，立刻从服务器加载下来，渲染出来
第二部.png
3、点击加载后，3000毫秒，此时异步组件1被触发从服务器加载，渲染
第三部.png