element按需加载后包还是很大 elementor 加载慢

在以前公司开发的时候，有过开发表格的经历，表格我们一般使用element-UI,element-UI这个表格它其实有一个致命的缺点，它会出现加载大量数据，会卡顿的现象，就是它会出现白屏。

如何解决它的卡顿现象：

加载大量数据一直是个历史性难题，一般情况下在做：报表，所有的表跟数据加载到一个里面了，以表格加载数据过大问题，它就会出现卡顿现象。

其中有很多方案，例如：

1. 利用C3里的一些特性（transform），让它在加载表格的时候，它不先加载这些东西，在向下拉的时候在去加载；
2. 虚拟渲染：它会让你感觉把所有数据加载完了，但实际上它加载的只是头部，中间的可见区域跟下面的可见区域等你拉倒那一块时才会去加载；
3. 使用人家给提供好的一个库，用这个库去实现表格的一个大量加载，clusterize这个库是被封装好的一个库，这个库它就运用能让眼睛有一个视觉上的效果，你感觉加载完了这么多数据，但实际上它只加载完了上下两块，现在用这个库的结合clusterize+element-UI实现了不管是表格还是div它都可以实现大量加载，甚是可加载上万级别的而且还不会感觉到卡顿；

这是当前代码：

GridView.vue组件

<template>
  <div>
    <el-table
      :data="tableData" style="width: 100%">
      <el-table-column
        v-for="cls in columns"
        :prop="cls.prop"
        :key="cls.prop"
        :label="cls.title"
        :width="cls.width"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: ["tableData", "columns"],
  name: "GridView",
};
</script>

<style>
</style>

MyGridView.vue组件

<template>
  <div id="MyGridView">
    <GridView :columns="columns" :tableData="tableData"/> //全局组件
  </div>
</template>

<script>
export default {
  name: "MyGridView",
  data() {
    return {
      columns: [
        { 
          prop: "date",
          title: "日期",
          width: "180",
        },
        {
          prop: "name",
          title: "姓名",
          width: "180",
        },
        {
          prop: "address",
          title: "地址",
          width: "180",
        },
      ],
    };
  },
  computed: {
    tableData() {
      let arr = [];
      for (let i = 0; i < 10000; i++) {
        arr.push({
          date: `${new Date().getMinutes()}
        :${new Date().getSeconds()}`,
          name: "门" + i,
          address: "石家庄" + i,
        });
      }
      return arr;
    },
  },
};
</script>

<style>
</style>

接下来，用第三种方法去解决加载大量数据的卡顿现象：

clusterize官网： https://clusterize.js.org/

使用这个压缩过后的：

将它引入index.html文件夹：

在dist文件夹下创建clusterize.js文件，将https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.18.0/clusterize.js 里面代码放入：

css文件以同样方式放入;

index.html文件引入方式修改，因为打包上线后它是在dist目录下：

GridView.vue组件 写入mounted

getRowsAmount返回当前所有条数据

<template>
  <div id="scrollArea">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        v-for="cls in columns"
        :prop="cls.prop"
        :key="cls.prop"
        :label="cls.title"
        :width="cls.width"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: ["tableData", "columns"],
  name: "GridView",

  mounted() {
    //加载完成之后
    setTimeout(() => {
      var clusterize = new Clusterize({
        rows: document.querySelectorAll(".el-table__row"), // 类 el-table_row
        scrollElem: document.getElementById("scrollArea"), //#scrollArea
        contentElem: document.querySelector(".el-table__body tbody"), //.el-table_body tbody
      });
      // getRowsAmount 返回当前所有条数据
      console.log(clusterize.getRowsAmount())
    },1000);
  },
};
</script>

<style>
#scrollArea {
  height: 500px;
  overflow-y: auto;
}
</style>

OK，打开浏览器加载一下

拜