如何在Vue项目中使用Web Worker实现一个长尾词的形式的interval计时器？

本文共计561个文字，预计阅读时间需要3分钟。

今天在code review时，发现之前遗留的问题：在一个视频播放页面，有一个40ms的interval一直在阻塞，导致视频延迟逐渐增大。原因是写了一个worker单独把计时器拉出去跑了。实现步骤如下：

今天在code review时，发现之前遗留的问题：

在一个视频播放页面，有一个40ms的interval一直在阻碍，导致视频延时逐渐增大

于是写了一个worker单独把计时器拉出去跑了

实现步骤如下

由于用的是vue-cli，在webpack下要安装worker-loader依赖才能单独加载worker.js

npm install worker-loader --save-dev

更改vue.config.js 文件的配置项

configureWebpack:{ module: { rules: [ { test: /\.worker\.js$/, loader: 'worker-loader', options: { inline: true, fallback: false, name: '[name]:[hash:8].js' } } ] }, }

注意，worker-loader配置项一定要写在js-loader的前边，否则报错。