vite worker 简单使用

最新推荐文章于 2024-05-21 09:25:02 发布

阿豪boy

最新推荐文章于 2024-05-21 09:25:02 发布

阅读量1.9k

点赞数

文章标签： python java 机器学习 js linux

本文链接：https://blog.csdn.net/qq_35516360/article/details/122064513

版权

原文链接: vite worker 简单使用上一篇...

摘要由CSDN通过智能技术生成

原文链接: vite worker 简单使用

上一篇: eslint import 排序和单词拼写检查插件

下一篇: Lighthouse 性能优化 vite 添加pwa支持

https://vitejs.dev/guide/features.html#web-assembly

用着还挺好用的...

worker可以直接引入各种资源

由于worker相比主线程还是有性能损耗的, 而且做不到真正的多进程效果, 未必能大幅度提高速度, 但是主要作用还是避免浏览器卡死

import MyWorker from './worker?worker'

const worker = new MyWorker()

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

阿豪boy

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
vite worker 简单使用

原文链接: vite worker 简单使用上一篇...
复制链接

扫一扫

使用 Vue3 + Vite + Canvas + Worker 实现简单版的 “雷霆战机”

Binlins的博客

11-28

581

使用 Vue3 + Vite + Canvas + Worker 实现简单版的 "雷霆战机"

vite-worker使用

u014708123的博客

01-10

907

vite是现在流行的前端打包工具，有时候需要使用worker，虽然官方有些，但实际可能还有同学不是很会用，所以自己实践了一下记录了一波使用方法；

2 条评论您还未登录，请先登录后发表或查看评论

vite使用webWorker

最新发布

walaw11的博客

05-21

335

使用web worker可以进行多线程的数据处理, 我们可以把包含大量数据的逻辑交给webworker, 能避免在数据处理过程中造成的页面卡顿.需要注意的是, 为了让worker文件放在vue项目下, 并且支持ts和ES, 需要用new URL预置方法来处理路径。项目根目录的任意目录下, 新建一个webworker的文件。

vite-plugin-external-worker:用于捆绑外部（非内联）网络工作者的 Vite 插件

05-30

vite-plugin-external-worker 已弃用Vite 2.0+ 现在支持直接使用 Rollup 插件。插件，允许非内联捆绑 web worker，允许在主入口点和 worker 之间进行代码拆分。设置使用您选择的包管理器安装它 : npm i -D vite-plugin-external-worker : pnpm i -D vite-plugin-external-worker yarn add -D vite-plugin-external-worker 将它添加到您的vite.config.js文件中 import worker from 'vite-plugin-external-worker' ; export default { plugins : [ worker ( ) , ] , } ; 使用?worker=ex

vite vue3中使用 webworker

qq_37312180的博客

03-22

1265

vite vue3中使用 webworker详细代码在Vue 3和Vite项目中使用Web Worker，你需要创建一个worker文件，然后在组件中创建并使用worker。

vue webworker使用

youzi______的博客

08-17

683

1、postMessage操作流程：demo.worker.js文件中发送的消息须在实例化Worker的文件中处理消息，反之实例化Worker的文件中发送的消息则会在demo.worker.js文件中监听到；2、demo.worker.js文件中是没有window对象的，所以需要处理业务流程时，须在实例化Worker的文件中进行。在vue.config.js中配置。下载worker-loader。

vue中使用webWorker worker-loader配置

qq_51389137的博客

06-10

3076

添加 chainWebpack的一段路径解析（关于chainWebpack为webpack的配置同extendWebpack相同），添加了解析配置后，worker-loader就可以解析后缀为 worker.js的js文件为worker对象了。3.在src文件夹下创建一个存放所有worker文件的文件夹workers，创建一个子线程js文件 test.worker.js。quasar cli中 quasar.config.js的build对象中。vue.config.js中配置。

Web Worker js多线程运行前端性能优化

m0_60880588的博客

01-31

444

Web Worker 多线程运行优化性能

vue3中使用Web Worker多线程（JS原味版）

06-17

用于《vue3中使用Web Worker多线程》这篇文章的项目Demo下载文章地址：https://blog.csdn.net/weixin_42063951/article/details/125300644

vue3中使用Web Worker多线程（TS风味版）

06-17

用于《vue3中使用Web Worker多线程》这篇文章的项目Demo下载文章地址：https://blog.csdn.net/weixin_42063951/article/details/125300644

vite-plugin-pwa：Vite的零配置PWA

02-05

产生具有离线支持的Service Worker（通过）自动注入Web App WIP ：策略选项 WIP ：元注入 WIP ：不同尺寸的图标生成用法 :information_selector: v0.3.x支持Vite 2， v0.3.x支持Vite 1。 npm i vite-plugin-...

vitedge:边缘渲染和全栈Vite框架

04-11

Vitedge只是Vite app:trade_mark: ，可在边缘工作器中预渲染第一个视图，而其余视图作为SPA运行。这意味着在保持SPA的快速路由和DX的同时，还可以带来良好的SEO。在某些情况下，它可以代替静态站点生成器，因为它...

vite + vue3 + web worker使用记录

xiao_cheng_的博客

09-13

6247

vue3使用web worker

Vite 与 Web Worker 小记

菜虚鲲的博客

06-30

2041

Vite + Web worker 笔记

vue3中使用Web Worker多线程

weianl的博客

06-18

1万+

最近在做vue3的项目中，遇到了计算量庞大导致页面响应缓慢的问题，正好每个计算任务的结果不需要汇总，所以想到了以多线程的形式去执行每个计算任务。但是通过一轮google、baidu都没有找到vue3的案例，还好在外网的一篇案例中嗅到了一丝可能。大佬可以跳过，对于Web Worker多线程可能有很多小伙伴还不知道是干嘛的，所以我先举一个列子让大家知道它大概是用来做什么的。①洗完澡后再洗衣服：在没有洗衣机（Worker）前，通常都是先洗完澡后再手洗衣服（这里我除外，我都是踩着衣服一起洗澡的），这样我们每天都

静态资源如何在 Vite 中处理各种静态资源？

江拥羡橙的博客

06-30

3084

一般在我们访问线上的站点时，站点里面一些静态资源的地址都包含了相应域名的前缀，如:以上面这个地址例子，是 CDN 地址前缀，/logo.png则是我们开发阶段使用的路径。那么，我们是不是需要在上线前把图片先上传到 CDN，然后将代码中的地址手动替换成线上地址呢？这样就太麻烦了！在 Vite 中我们可以有更加自动化的方式来实现地址的替换，只需要在配置文件中指定base。

vue 中使用 worker-loader 及遇到的问题

热门推荐

Amy的博客

08-05

1万+

Web Worker 使用教程 Worker - Web API 接口参考 | MDN 版本 Vue CLI 3 webpack 4 worker-loader 3 vue-cli3 中依赖的 webpack 版本是 "webpack": "^4.0.0"，而 "worker-loader": "^3.0.0" 要求的 webpack 版本是 4 | 5。使用前要检查下各个依赖对应版本，不然会引发一些错误。不同版本配置文件会有所不同，后面介绍。使用参考：vue中使用web worker webp

vue cli3 配置 worker-loader 使用worker

阿豪

05-07

1345

原文链接: vue cli3 配置 worker-loader 使用worker ...

【Vue3+vite+Echarts】完美解决3D图表旋转卡顿问题，警告： ‘requestAnimationFrame‘ handler 用时＜N＞毫秒

zlting_的博客

03-25

589

hi brother！你是否还在为3D图表旋转卡顿而烦恼？不用担心，跟着本文步骤走，让咱们的图表丝滑旋转上天！

vue3 vite 使用 webworker

05-25

在 Vue3 中使用 Web Worker 可以让一些计算量大的任务在后台运行，避免阻塞主线程，同时也能提高页面的响应速度。首先，在项目中安装 `worker-loader`。可以使用以下命令： ``` npm install worker-loader --save-dev ``` 然后，在 `vue.config.js` 中添加以下配置： ```javascript module.exports = { chainWebpack: config => { config.module .rule('worker') .test(/\.worker\.js$/) .use('worker-loader') .loader('worker-loader') .end(); } }; ``` 这样，当我们在项目中引入 `*.worker.js` 文件时，会自动使用 `worker-loader` 进行处理。接着，在组件中使用 Web Worker： ```html <template> <div> <p>计算结果：{{ result }}</p> <button @click="startCalculation">开始计算</button> </div> </template> <script> import CalculationWorker from './calculation.worker'; export default { data() { return { result: null }; }, methods: { startCalculation() { // 创建一个新的 Web Worker const worker = new CalculationWorker(); // 给 Worker 发送消息 worker.postMessage('start'); // 监听 Worker 的消息 worker.addEventListener('message', event => { this.result = event.data; }); } } }; </script> ``` 在上面的示例中，我们创建了一个名为 `calculation.worker.js` 的文件，并在组件中引入了它。在组件中，我们创建了一个新的 Web Worker 实例，并给它发送了一个消息。同时，我们还监听了 Worker 返回的消息，并将结果更新到组件中。注意，由于 Web Worker 运行在一个单独的线程中，无法访问 DOM 元素，因此需要通过 postMessage 和 onmessage 来进行通信。在 Worker 中，我们可以使用 `self.postMessage()` 发送消息，并在主线程中使用 `worker.addEventListener('message', event => {})` 来接收消息。以上就是在 Vue3 中使用 Web Worker 的基本步骤。希望能对你有所帮助！