vue+vite项目下如何正确编写webworker

vue+vite下webworker是怎么样实现的，本文主要进行讲解在如今流行的vue3+vite打包工具下，怎样实现一个简易的webworker，因为和webpack打包工具实现的方式有差别，因此写出来供大家参考

什么是webworker？用我自己的理解并且用人话来说，就是可以实现，在网页涉及大量的计算，或者说网页需要进行长时计算以及复杂渲染过程，但是这个过程和网页的交互是并行的，我们通常会希望说，这些复杂的过程不会影响用户去影响网页的使用，然鹅，我们最喜欢的javascript偏偏就是单线程的语言，意味着这些过程只有计算完成之后，才会执行其他的代码，也就是交互。否则，在计算还没有计算完成的时候，页面处于卡si的状态，如果没有加载器，会让用户觉得很奇怪，似乎是网页坏了。这个时候，webworker就诞生了，作用如其名，webworker就是一个个的工人，可以去完成不同的工作而不影响主线的工作，因为人多了嘛～

好的，我们步入正题。
传统的webworker搭建过程很简单，没有什么太大的难点，但是在webpack下是这么书写代码的。

1. 首先，需要有项目的主入口文件，比如说app.vue，或者自己写一个index.js
2. 创建woker.js脚本，其实就是写计算过程然后把结果暴露出去
3. 主页面接收结果即可。

app.js

<template>
    <div>
        hello
        <button @click="aa">aa</button>
    </div>
</template>
<script setup lang="ts" name="hello">
console.log('aaaaaa');
const worker = new Worker('worker.js');
worker.addEventListener('message', e => {
    console.log(e);
    console.log("父线程接收到：", e.data);
    alert('计算完毕')
})
function aa(){
    worker.postMessage('主线程到子线程');
}
</script>

worker.js

self.addEventListener('message', function (e) {
  for(let i = 0; i < 1e10; i++){
      let j = i + 1;
  }
    console.log("子线程接收到：", e.data);
    self.postMessage("子线程到父线程");
}, false);

那这样子，在vue+webpack环境下就算是书写完一个很简单的专用woker模版，如果你发现还没有办法去运行，那大概率就是没有下载loader（这个是worker-loader），然后还需要去webpack配置这个loader进去，主要是在webpack.comfig.js进行配置，至于如何配置loader，相信学过webpack的就知道啦～找到loader配置选项（一个大对象，名字叫loader），写入：

{
 test: /\.worker\.js$/,
    loader: "worker-loader",
    options: {
        inline: true,
        name: "workerName.[hash].js"
    }
},

接下来需要说的是，目前主推的vue3，更多的打包工具用的是vite，这个是推荐的，我相信大部分人使用的也是vite吧，如果不是那就算了哈哈。
在vue+vite下，worker可不是这么写的，会报错如下：

你猜对了，这个报错通常就是语法错误。
在vite下，worker.js的导入应该这么写（worker.js的内容是不需要改变的）：
在app.vue下:

<template>
    <div>
        hello
        <button @click="aa">aa</button>
    </div>
</template>
<script setup lang="ts" name="hello">
import Worker from './worker.js?worker'
console.log('aaaaaa');
const worker = new Worker();
worker.addEventListener('message', e => {
    console.log(e);
    console.log("父线程接收到：", e.data);
    alert('计算完毕')
})
function aa(){
    worker.postMessage('主线程到子线程');
}
</script>

import Worker from ‘./worker.js?worker’ 后面的这个？worker是需要写的，问就是要求语法这么写。

我个人觉得，webworker在web3D渲染有很大的用处，设计高级渲染和大量的几何计算的时候，当然，如果你的页面背景是自己有帧一帧渲染（oh my gad），而且不想用户等待背景渲染完在使用网页的话，你可以使用这个玩意儿。

好的，今天的分享就到这里～由于实习，更新越来越慢（其实是懒～ ），加油，一切顺利！