Vue 中使用 WebWorker

目录

安装 loader

应用场景

打包时错误处理

---

安装 loader

npm install worker-loader -D

如果直接把worker.js放到public目录下，则不需要安装loader

vue.config.js

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({

    transpileDependencies: true,

    lintOnSave:false, // 关闭eslint检查

    parallel: false ,

    chainWebpack: config => {

        config.module

            .rule('worker')

            .test(/\.worker\.js$/)            // 文件名必须要xxx.worker.js

            .use('worker')

            .loader('worker-loader')

    }

})

index.vue

demo.worker.js

import * as THREE from 'three';

onmessage = (e) => {

    console.log(e.data);

    console.log(`THREE`, THREE);

    const posArry = e.data; // e.data用于存储移动路线的数组

    const path = new THREE.LineCurve(posArry[0], posArry[1]);

    console.log(`path`, path);

    postMessage(path);



}

 应用场景

浏览器的JS线程和GUI渲染线程互斥

在主线程跑吃性能的同步任务，GUI渲染线程会挂起，页面不能及时响应渲染

在worker跑时，GUI渲染线程不会被挂起，页面可以正常响应

优势：

避免页面渲染阻塞。用一个worker处理主线程的任务，两者处理时间差不多，worker的优势在于处理过程中不会影响页面的渲染（e.g. 导出时 Element.message组件弹出提示，但是由于JS处理时间过长，导致页面渲染被阻塞，提示不能及时显示）

减少任务处理时间。worker可以有多个（多线程），用多个worker处理主线程的任务时，总的任务时长会减少（e.g. 压缩100张图片）

 打包时错误处理

 ERROR  Failed to compile with 1 error                                                                                                                                                                               16:12:04



 error  in ./src/pages/HoneViewPage/demo.worker.js



Syntax Error: Thread Loader (Worker 0)

Cannot read properties of undefined (reading 'options')




 ERROR  Error: Build failed with errors.

Error: Build failed with errors.

    at D:\test_project\vue_worker-loader\node_modules\@vue\cli-service\lib\commands\build\index.js:207:23

    at D:\test_project\vue_worker-loader\node_modules\webpack\lib\webpack.js:148:8

    at D:\test_project\vue_worker-loader\node_modules\webpack\lib\HookWebpackError.js:68:3

    at Hook.eval [as callAsync] (eval at create (D:\test_project\vue_worker-loader\node_modules\tapable\lib\HookCodeFactory.js:33:10), :6:1)

    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (D:\test_project\vue_worker-loader\node_modules\tapable\lib\Hook.js:18:14)

    at Cache.shutdown (D:\test_project\vue_worker-loader\node_modules\webpack\lib\Cache.js:150:23)

    at D:\test_project\vue_worker-loader\node_modules\webpack\lib\Compiler.js:1225:15

    at Hook.eval [as callAsync] (eval at create (D:\test_project\vue_worker-loader\node_modules\tapable\lib\HookCodeFactory.js:33:10), :6:1)

    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (D:\test_project\vue_worker-loader\node_modules\tapable\lib\Hook.js:18:14)

    at Compiler.close (D:\test_project\vue_worker-loader\node_modules\webpack\lib\Compiler.js:1218:23)

Syntax Error: Thread Loader(Worker 1)

Cannot read properties of undefined (reading 'options')

框架：@vue/cli@5 + [email protected] + ts

vue-cli 使用wokrer-loader 加载web woker时，使用npm run build 有很大机率会打包失败，报错如上。

thread-loader 与worker-loader有冲突。

解决：

vue.config.js 配置

parallel: false  

构建正式环境关闭thread-loader

parallel: false  

vue.config.js 

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave:false, // 关闭eslint检查
    parallel: false ,
    chainWebpack: config => {
        config.module
            .rule('worker')
            .test(/\.worker\.js$/)            // 文件名必须要xxx.worker.js
            .use('worker')
            .loader('worker-loader')
    }
})

 vue-cli: Syntax Error: Thread Loader:https://blog.csdn.net/qq_35459724/article/details/127080017

配置参考 | Vue CLI (vuejs.org);https://cli.vuejs.org/zh/config/#devserver-proxy

参考链接：https://blog.csdn.net/weixin_44240581/article/details/129186915

预览：https://1t1824d.github.io/vue-worker_loader_preview/#/