chainWebpack配置WebWorkers

WebWorker作为浏览器开启子线程的一种新方式，Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。

一、UmiJS中配置使用WebWorkers在chainWebpack里面基于worker-plugin配置首先 npm 依赖

npm install -D worker-plugin

config.ts文件里配置chainWebpack中配置

import WorkerPlugin from 'worker-plugin';export default defineConfig({hash: true,antd: {},dva: {hmr: true,},history: {type: 'browser',},locale: {// default zh-CNdefault: 'zh-CN',antd: true,// default true, when it is true, will use `navigator.language` overwrite defaultbaseNavigator: true,},dynamicImport: {loading: '@/components/PageLoading/index',},targets: {ie: 11,},// umi routes: https://umijs.org/docs/routingroutes,// Theme for antd: https://ant.design/docs/react/customize-theme-cntheme: {'primary-color': defaultSettings.primaryColor,},title: false,ignoreMomentLocale: true,proxy: proxy[REACT_APP_ENV || 'dev'],manifest: {basePath: '/',},esbuild: {},parallel: false,chainWebpack: config => {config.plugin('worker-plugin') // 保证name的唯一性，避免出现覆盖的情况.use(new WorkerPlugin()) // plugin：plugin的实例 options:plugin的配置}
});

新建worker.tsx 接收发送数据

addEventListener('message', event => {console.log(event)postMessage('messageson'); // 发送数据
});

index.tsx里面

const Index: React.FC<LoginProps> = (props) => {const piWorker = new Worker('./worker.tsx', { type: 'module' });piWorker.onmessage = event => {console.log('pi: ' + event.data); // 接受数据};piWorker.postMessage('我是容器'); // 发送数据return <div>Worker测试</div>
};export default Index;

运行结果

二、基于worker-loader的配置
首先npm依赖

npm install worker-loader --save-dev

worker.tsx中

// 接收数据
onmessage = function (evt) {console.log('----接收主线程start---')console.log(evt);console.log('----接收主线程end---')
}
// 发送数据
postMessage({message: '我来自子线程',
});

index.tsx里接受发送数据

import Worker from "./worker";const Index: React.FC<LoginProps> = (props) => {const worker = new Worker(); worker.onmessage = function(evt){// 主线程收到工作线程的消息console.log('----接收子线程数据start---')console.log(evt)console.log('----接收子线程数据end---')};//主线程向工作线程发送消息worker.postMessage({ message: '我来自主线程' });return (<div>Worker测试</div>);
};export default Index;

结果输出

第二种方法看着完美，但是当在worker.tsx中导入依赖webpack编译就会报错，希望有知道的小伙伴告知下。

import request from '@/utils/request'; // 加入一个依赖
onmessage = function (evt) {console.log('----接收主线程start---')console.log(evt);console.log('----接收主线程end---')
}
// 发送数据
postMessage({message: '我来自子线程',
});

webpack报错如下

怎么解决请小伙伴指教，谢谢啦。

chainWebpack配置WebWorkers相关推荐

Vue-cli中 vue.config.js 的配置详解
1. Vue-cli2 升级到 Vue-cli3+ 1.1 卸载旧版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli. 如果你已经全局安装了旧版本的 vue-cli (1.x ...
vuepress 2.x 集成 element-plus
安装element-plus 进入vuepress根目录,执行命令 npm install element-plus 修改 clientAppEnhance.js 接下来需要修改用于客户端应用增强的d ...
single-spa结合vue项目初探
single-spa结合vue项目初探本次案例以vue-element-admin为例,验证single-spa的可接入性.根据single-spa的官网介绍,推荐将项目的所有文件(包括图片和css ...
2022年vue项目使用go.js 2.1去水印
背景网上找了一大堆去除gojs的方法,要么针对新版已经失效(搜关键字7eba17a4ca3b1a8346,搜不到),要么是修改node_modules中的文件(CI\CD构建发版到生产环境无效). ...
Springboot+Vue实现简单的前端后分离数据交互
目录一,前后端分离介绍二,与传统单体结构的比较 2.1,传统单体结构开发 2.2,前后端分离结构开发三,简单实现前后端数据交互 1,准备的环境及工具 2,开发步骤 2.1,后端部分 2.2,前端 ...
vue - vue的配置文件vue.config.js介绍
文章目录前言: 常用配置项如下: 常用配置项说明: 前言: 注意: 使用 vue-cli 3.x 以上的脚手架创建的 vue 项目不再有 build 文件夹,若需要进行相关配置,需在项目目录下新建文 ...
一文教会你如何用Vue开发Chrome插件
前言作为一个常年的B端前端开发者来说,千篇一律的业务开发有着些许的枯燥无味.在联调过程中,会经常发现后端在部署服务,然后又不知什么时候部署好,由于公司的部署系统查看系统部署状态入口较深,所以闲暇之余 ...
Vue项目打包后不能正常显示页面
项目场景: 通过 Vue CLI 创建的 vue 项目,编写完项目后,通过 npm run bulid 对项目进行打包,再把打包得到的内容(dist文件夹)交给后端部署到服务器上. 问题描述: 对 v ...
Vue Cli3 添加Loader和plugin
添加loader 在vue.config.js中的chainWebpack中添加配置: chainWebpack: config => {// my-loader为loader的别名,./src ...

chainWebpack配置WebWorkers

chainWebpack配置WebWorkers相关推荐

最新文章

热门文章