关于VueCli项目中如何加载调试Worker和SharedWorker

2024-04-04 07:04

本文主要是介绍关于VueCli项目中如何加载调试Worker和SharedWorker,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

安装Webpack插件

VueCli 项目中默认是没有加载 worker 的配置,需要额外安装 webpack 插件来实现,让我们开始安装 worker-loader 插件

# npm
npm install worker-loader
# pnpm
pnpm install worker-loader
# yarn
yarn add worker-loader

配置Webpack插件

然后我们开始配置 vue.config.js 增加下面配置

{// ...chainWebpack: config => {// 配置 worker-loader 插件,匹配处理 *.worker.js 文件config.module.rule('worker').test(/\.worker\.js$/).use('worker-loader').loader('worker-loader').tap(() => ({ worker: 'SharedWorker' })).end();// 排除 *.worker.js 解决无法热更新问题config.module.rule('js').exclude.add(/\.worker\.js$/);}// ...
}

编写SharedWorker

然后我们在 src/* 任意目录下创建 *.worker.js 文件,例如 src/test.worker.js

// path: src/test.worker.js
const ports = [];
onconnect = (event) => {const port = event.ports[0];ports.push(port);port.onmessage = (event) => {const data = event.data;console.log('[Main] 收到消息', event.data);// 关闭连接if (data === 'close') {const index = ports.findIndex(vo => vo === port);index > -1 && ports.splice(index, 1);}// 测试连接if (data === 'ping') {port.postMessage('ok');}// 广播消息if (data === 'broadcast') {ports.forEach((vo) => vo.postMessage('say'));}};
};

编写App.vue

然后我们在应用中去初始化 src/test.worker.js 并测试调用

// path: src/App.vue
import TestWorker from './test.worker.js';export default {// ...created() {const worker = new TestWorker()worker.port.start();worker.port.onmessage = (event) => {console.log('[Main] 收到消息', event.data);};setTimeout(() => {worker.port.postMessage('ping');}, 1000);setTimeout(() => {worker.port.postMessage('broadcast');}, 2000);// 监听当前页面关闭主动销毁端口window.addEventListener('beforeunload', () => {worker.port.postMessage('close');});}// ...
};

开始调试

SharedWorker 在浏览器所有归属当前应用页签都关闭后会直接结束

浏览器输入 chrome://inspect/#workers 点击查看 Shared workers 即可查看当前运行中的 Shared workers 其中,inspect 是打开调试控制台,terminate 是结束当前任务

当焦点标签页关闭后,主动删除 port 可以优化内存,用于维护活跃的页面列表

这篇关于关于VueCli项目中如何加载调试Worker和SharedWorker的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/875109

相关文章

SpringBoot中配置文件的加载顺序解读

《SpringBoot中配置文件的加载顺序解读》:本文主要介绍SpringBoot中配置文件的加载顺序,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot配置文件的加载顺序1、命令⾏参数2、Java系统属性3、操作系统环境变量5、项目【外部】的ap

利用Python调试串口的示例代码

《利用Python调试串口的示例代码》在嵌入式开发、物联网设备调试过程中,串口通信是最基础的调试手段本文将带你用Python+ttkbootstrap打造一款高颜值、多功能的串口调试助手,需要的可以了... 目录概述:为什么需要专业的串口调试工具项目架构设计1.1 技术栈选型1.2 关键类说明1.3 线程模

SpringBoot项目中报错The field screenShot exceeds its maximum permitted size of 1048576 bytes.的问题及解决

《SpringBoot项目中报错ThefieldscreenShotexceedsitsmaximumpermittedsizeof1048576bytes.的问题及解决》这篇文章... 目录项目场景问题描述原因分析解决方案总结项目场景javascript提示:项目相关背景:项目场景:基于Spring

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基

springboot项目如何开启https服务

《springboot项目如何开启https服务》:本文主要介绍springboot项目如何开启https服务方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录springboot项目开启https服务1. 生成SSL证书密钥库使用keytool生成自签名证书将

将Java项目提交到云服务器的流程步骤

《将Java项目提交到云服务器的流程步骤》所谓将项目提交到云服务器即将你的项目打成一个jar包然后提交到云服务器即可,因此我们需要准备服务器环境为:Linux+JDK+MariDB(MySQL)+Gi... 目录1. 安装 jdk1.1 查看 jdk 版本1.2 下载 jdk2. 安装 mariadb(my

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

springboot项目中常用的工具类和api详解

《springboot项目中常用的工具类和api详解》在SpringBoot项目中,开发者通常会依赖一些工具类和API来简化开发、提高效率,以下是一些常用的工具类及其典型应用场景,涵盖Spring原生... 目录1. Spring Framework 自带工具类(1) StringUtils(2) Coll

Spring Boot项目部署命令java -jar的各种参数及作用详解

《SpringBoot项目部署命令java-jar的各种参数及作用详解》:本文主要介绍SpringBoot项目部署命令java-jar的各种参数及作用的相关资料,包括设置内存大小、垃圾回收... 目录前言一、基础命令结构二、常见的 Java 命令参数1. 设置内存大小2. 配置垃圾回收器3. 配置线程栈大小

Spring Boot项目中结合MyBatis实现MySQL的自动主从切换功能

《SpringBoot项目中结合MyBatis实现MySQL的自动主从切换功能》:本文主要介绍SpringBoot项目中结合MyBatis实现MySQL的自动主从切换功能,本文分步骤给大家介绍的... 目录原理解析1. mysql主从复制(Master-Slave Replication)2. 读写分离3.