前端性能优化：组件懒加载

组件懒加载

使用场景

• 该页面的 JS 文件体积大，导致页面打开慢，可以通过组件懒加载进行资源拆分，利用浏览器并行下载资源，提升下载速度（比如首页）

• 该组件复用性高，很多页面都有引入，利用组件懒加载抽离出该组件，一方面可以很好利用缓存，同时也可以减少页面的 JS 文件大小（比如表格组件、图形组件等）

• 该组件不是一进入页面就展示，需要一定条件下才触发（比如弹框组件）

代码编辑

<script>
const dialogInfo = ()=>import('@/components/dialogInfo')
export default {
   components:{
      dialogInfo
   }
}
</script>