一、懒加载原理

1. 动态导入：在JavaScript中，我们通常使用import语句来导入模块。但是，这种方式会在编译时就将模块导入，增加了初始包的大小。为了解决这个问题，我们可以使用动态导入(import()函数)来实现按需加载。当调用import()函数时，它会返回一个Promise对象，这个Promise对象解析完成后的结果就是我们所导入的模块。
2. 代码分割：代码分割是webpack等打包工具的一个功能，它可以将代码分割成多个小的包，然后按需加载。这样可以减少初始加载时间，提高应用的性能。 在Vue中，我们可以结合Vue Router和webpack来实现组件的懒加载。例如，我们可以在路由配置中使用动态导入来实现懒加载：

const UserDetails = () => import('./views/UserDetails.vue')

这样，当用户访问UserDetails页面时，才会加载对应的组件。
此外，我们还可以使用webpack的魔法注释（Magic Comments）来进一步控制代码分割的行为。例如，我们可以使用webpackChunkName注释来将同一个路由下的所有组件都打包在同一个异步块中：

const UserDetails = () => import(/* webpackChunkName: "user" */ './views/UserDetails.vue')

二、路由懒加载

路由懒加载，就是当路由被访问的时候才加载对应组件，而不是一次性加载所有组件。
首屏组件加载更快，用户体验好

2.1 路由懒加载的实现

const WebsiteLinks = () => import('@/components/WebSiteLinks')
export default new Router({
    mode:'history',
    routes: [
        {
            path: '/WebsiteLinks',
            name: 'WebsiteLinks',
            component: WebsiteLinks,
            router: true
        }
    ]
})
// 或者
const WebsiteLinks = (resolve) => {
    import('@/components/WebSiteLinks').then(module => {
        resolve(module)
    })
}
export default new Router({
    mode:'history',
    routes: [
        {
            path: '/WebsiteLinks',
            name: 'WebsiteLinks',
            component: WebsiteLinks,
            router: true
        }
    ]
})
// 未使用
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
    routes: [
        {
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        }
    ]
})

三、组件懒加载

3.1 组件懒加载的实现

template

<template>
    <div class="talkAnymore">
        <InfoLeft></InfoLeft>
    </div>
</template>

script

<script>
import InfoLeft from './infoLeft' // 正常加载
const InfoLeft = () => import('./infoLeft') // 懒加载
export default {
    components:{
        InfoLeft
    },
    data(){
        return{
            data:[],
        }
    },
}
</script>

3.2 懒加载父子组件生命周期变化

使用不同的方式，生命周期渲染方式不同

• 懒加载：父beforeCreate->父created->父beforeMount->父mounted->子beforeCreate->子created->子beforeMount->子mounted
• 直接导入：父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted 只有在组件的加载阶段，执行顺序会稍微有些不同，其更新阶段和销毁阶段，顺序是相同的。