解决返回大量数据导致页面卡顿的问题

1、准备基本的代码

<template>
  <div>
    123
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },

  created () {
    this.getChartsData()
  },

  methods: {
    getChartsData () {
      const arr = Array(100000000).fill(10)
      console.log(arr)
      const newArr = arr.map(item => 1)
      console.log(newArr)
    }
  }
}
</script>

<style scoped lang='less'>

</style>

2、通过worker创建线程

const newWorker = new Worker(‘./worker.js’)

3、新建worker.js

将计算逻辑单独抽离，计算完成通过postMessage将

self.onmessage = function (event) {
  const newArr = event.data.map(item => 1)
  self.postMessage(newArr)
}

通过newWorker.postMessage数据传递给worker线程

newWorker.postMessage(arr)

通过onmssage接收worker线程的数据

// 从 Worker 接收消息的处理程序
newWorker.onmessage = function (event) {
  const result = event.data
  console.log(result)
}

4、安装worker-loader

4.1  因为开启服务无法直接加载本地资源，利用worker-loader将开启线程处理的资源文件进行打包处理，可以正常访问其资源

4.2 安装 插件 

npm i worker-loader

4.3 配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack (config) {
    const workerRule = config.module.rule('worker')
    workerRule
      .test(/\.worker\.js$/)
      .use('worker')
      .loader('worker-loader')
      .end()
  }
})

4.4 修改文件名

将之前worker.js修改为file.worker.js文件

4.5 修改使用方式

import Worker from './file.worker.js'
const newWorker = new Worker()