vue懒加载对话框API封装技巧（项目必备技能，适用于各种需要懒加载动态展示的弹框组件）

    懒加载对话框的方式做到了在你调用弹框展示API的那一刻，才去加载对话框文件并最终显示弹框效果。它最大的意义在于减少了你初次进入页面时加载的文件资源请求量和大小（加载资源小了，网页加载速度自然就提升了），将它封装成API顺带也做到了统一管理对话框的目的并且使得对话框文件和页面文件分离，起到了一个模块化的效果。

    目前很多前端组件库提供的对话框组件在使用的时候，都是把对话框的代码和页面代码放在一起。例如下面Element官网的例子：

    这样一来你的页面如果有不少对话框的话，整个代码看上去就会很杂乱，同时也增大了你当前页面的大小。有人会把对话框抽离出去，用import引进使用的页面。这样仅仅做到了代码的分离，当你页面加载的时候，这部分的弹框代码也会被一同加载，而不管是否用到了这个弹框。下面我们看几组代码示例和效果动态图来一起对比一下，下方对话框的主体代码摘自Element官网示例。

    第一组（对话框代码和页面冗在一起)：

    测试页面代码如下：

<template>
  <div>
    <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>

    展示动态效果如下： 

    我们从响应报文里面看到文件的长度 Content-Length为23772B

    第二组（对话框代码和页面代码分离，主体页面通过import引入对话框组件)：

 （下方仅做了最简单的处理，不建议照笔者所示应用于实际项目）

    对话框组件代码如下