前端开发中性能优化之异步加载组件

使用异步组件：将页面中的组件按需加载，可以减少页面加载时间，提高页面性能。

非异步（普通）引入组件时： 如果在直接引入子组件时，将子组件的 v-if 设置为 false，则该子组件在父组件加载时不会被渲染，也不会影响页面性能。

但是需要注意的是，如果在子组件中有一些较重的操作（例如大量数据的计算、渲染等），即使 v-if 为false，这些操作也会在父组件加载时执行，可能会影响页面的性能，因为在 Vue 中，组件的生命周期钩子函数是在组件实例化时就会执行的，而不是在组件被渲染时才执行。因此，即使子组件的 v-if 为 false，子组件的生命周期钩子函数仍然会在父组件加载时执行

父组件App.vue

<template><div><h1>异步加载组件示例</h1><button @click="showChild">显示子组件</button><hr><div v-if="show"><async-child></async-child></div></div>
</template><script>
export default {name: 'App',data() {return {show: false}},methods: {showChild() {this.show = true}},components: {AsyncChild: () => import('./components/AsyncChild.vue')}
}
</script>

子组件 AsyncChild.vue

<template><div><h2>我是异步加载的子组件</h2><p>这是一个示例</p></div>
</template><script>
export default {name: 'AsyncChild'
}
</script>

在上面的示例中，父组件 App.vue 中使用了 v-if 指令来控制子组件的显示和隐藏，当点击按钮时，会将 show 属性设置为 true，从而显示子组件。在父组件中，使用 components 属性来定义异步加载的子组件，使用箭头函数和 import() 方法来异步加载子组件文件。在子组件中，只需要定义组件的模板和逻辑即可。
这样，当页面加载时，只会加载父组件的代码，而不会加载子组件的代码，只有在需要显示子组件时才会异步加载子组件的代码，从而减少页面加载时间，提高页面性能。