【九月打卡】第9天 vue如何异步加载组件

• 课程名称：前端框架及项目面试 聚焦Vue3/React/Webpack

• 课程章节： vue如何异步加载组件

• 主讲老师：双越

课程内容：

今天学习的内容包括：

vue如何异步加载组件

课程收获：

vue异步组件懒加载(按需加载)

利用webpack对代码进行分割是懒加载的前提，懒加载就是异步调用组件，需要时候才下载（按需加载）。

为什么需要懒加载?

在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

异步组件=原理同webpack的按需加载

好处：

• 1）按需加载，可以节省首次加载时间，提高速度，性能优化
• 2）第一次加载完成会缓存

<template>
    <div>
        <!-- 异步组件 -->
        <!-- <FormDemo v-if="showFormDemo"/>
        <button @click="showFormDemo = true">show form demo</button> -->
    </div>
</template>

<script>
export default {
    components: {
         FormDemo: () => import('../BaseUse/FormDemo'),
    },
    data() {
        return {
            name: '双越',
            website: {
                url: 'http://imooc.com/',
                title: 'imooc',
                subTitle: '程序员的梦工厂'
            },
            // NextTickName: "NextTick",
            showFormDemo: false
        }
    }
}
</script>

今天学习课程共用了35分钟，重新了解了一下vue基本知识点，这是我不知道第多少次决心补习面试题，希望能够坚持下去。