关于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

相关文章

Spring Boot 配置文件之类型、加载顺序与最佳实践记录

《SpringBoot配置文件之类型、加载顺序与最佳实践记录》SpringBoot的配置文件是灵活且强大的工具,通过合理的配置管理,可以让应用开发和部署更加高效,无论是简单的属性配置,还是复杂... 目录Spring Boot 配置文件详解一、Spring Boot 配置文件类型1.1 applicatio

一文教你如何将maven项目转成web项目

《一文教你如何将maven项目转成web项目》在软件开发过程中,有时我们需要将一个普通的Maven项目转换为Web项目,以便能够部署到Web容器中运行,本文将详细介绍如何通过简单的步骤完成这一转换过程... 目录准备工作步骤一:修改​​pom.XML​​1.1 添加​​packaging​​标签1.2 添加

tomcat多实例部署的项目实践

《tomcat多实例部署的项目实践》Tomcat多实例是指在一台设备上运行多个Tomcat服务,这些Tomcat相互独立,本文主要介绍了tomcat多实例部署的项目实践,具有一定的参考价值,感兴趣的可... 目录1.创建项目目录,测试文China编程件2js.创建实例的安装目录3.准备实例的配置文件4.编辑实例的

springboot集成Deepseek4j的项目实践

《springboot集成Deepseek4j的项目实践》本文主要介绍了springboot集成Deepseek4j的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录Deepseek4j快速开始Maven 依js赖基础配置基础使用示例1. 流式返回示例2. 进阶

SpringBoot项目启动报错"找不到或无法加载主类"的解决方法

《SpringBoot项目启动报错找不到或无法加载主类的解决方法》在使用IntelliJIDEA开发基于SpringBoot框架的Java程序时,可能会出现找不到或无法加载主类com.example.... 目录一、问题描述二、排查过程三、解决方案一、问题描述在使用 IntelliJ IDEA 开发基于

SpringBoot项目使用MDC给日志增加唯一标识的实现步骤

《SpringBoot项目使用MDC给日志增加唯一标识的实现步骤》本文介绍了如何在SpringBoot项目中使用MDC(MappedDiagnosticContext)为日志增加唯一标识,以便于日... 目录【Java】SpringBoot项目使用MDC给日志增加唯一标识,方便日志追踪1.日志效果2.实现步

Ubuntu中Nginx虚拟主机设置的项目实践

《Ubuntu中Nginx虚拟主机设置的项目实践》通过配置虚拟主机,可以在同一台服务器上运行多个独立的网站,本文主要介绍了Ubuntu中Nginx虚拟主机设置的项目实践,具有一定的参考价值,感兴趣的可... 目录简介安装 Nginx创建虚拟主机1. 创建网站目录2. 创建默认索引文件3. 配置 Nginx4

Android WebView无法加载H5页面的常见问题和解决方法

《AndroidWebView无法加载H5页面的常见问题和解决方法》AndroidWebView是一种视图组件,使得Android应用能够显示网页内容,它基于Chromium,具备现代浏览器的许多功... 目录1. WebView 简介2. 常见问题3. 网络权限设置4. 启用 JavaScript5. D

SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法

《SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法》本文主要介绍了SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法,具有一定的参考价值,感兴趣的可以了解一下... 目录方法1:更改IDE配置方法2:在Eclipse中清理项目方法3:使用Maven命令行在开发Sprin

Nginx实现高并发的项目实践

《Nginx实现高并发的项目实践》本文主要介绍了Nginx实现高并发的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录使用最新稳定版本的Nginx合理配置工作进程(workers)配置工作进程连接数(worker_co