vite环境引入web worker方法

简介: 在 vite 环境中使用 web worker 时,如果遇到生产环境中 worker.js 文件的 MIME 类型被识别为 text/html,导致报错无法运行的情况时,可以参考以下两种方法,原理都是避免编译时产出单独的 worker.js 文件。方法一worker文件不需要包装,引入时后缀增加 ?worker&inline,使用时直接 new ImportedWorker();self.

在 vite 环境中使用 web worker 时,如果遇到生产环境中 worker.js 文件的 MIME 类型被识别为 text/html,导致报错无法运行的情况时,可以参考以下两种方法,原理都是避免编译时产出单独的 worker.js 文件。

方法一

worker文件不需要包装,引入时后缀增加 ?worker&inline,使用时直接 new ImportedWorker();

self.addEventListener(
  'message',
  function (e) {
    const {
      data: { type, payload },
    } = e;
  });
import ImportedWorker from './worker?worker&inline';

const worker = new ImportedWorker();

worker.addEventListener ...

方法二

worker导出为函数;需要一个转换函数把 worker 转换为URL;

export function hilitorWorker() {
  self.addEventListener(
    'message',
    function (e) {
      const {
        data: { type, payload },
      } = e;
    });
}
export function createWorker(fn: any) {
  return new Worker(URL.createObjectURL(new Blob([`(${fn})()`], { type: 'text/javascript' })));
}
const worker = createWorker(hilitorWorker);
目录
相关文章
|
2天前
|
存储 Apache 文件存储
在Apache环境下为Web网站增设访问控制:实战指南
在Apache服务器上保护网站资源涉及启用访问控制模块(`mod_authz_core`和`mod_auth_basic`),在`.htaccess`或`httpd.conf`中设定权限,如限制对特定目录的访问。创建`.htpasswd`文件存储用户名和密码,并使用`htpasswd`工具管理用户。完成配置后重启Apache服务,访问受限目录时需提供有效的用户名和密码。对于高安全性需求,可考虑更复杂的认证方法。【6月更文挑战第20天】
63 4
|
2天前
|
安全 Ubuntu 应用服务中间件
NGINX环境下实现Web网站访问控制的实战指南
在NGINX中设置基于IP的访问控制可提升网站安全性。步骤包括安装NGINX、备份配置文件、编辑`/etc/nginx/sites-available/default`,添加`allow`和`deny`指令限制特定IP访问,如`allow 192.168.1.100; deny all;`,然后测试配置并重启服务。成功后,仅允许的IP能访问网站,否则会收到403错误。这为Web安全提供基础保障,还可扩展实现更多高级控制策略。【6月更文挑战第20天】
67 3
|
21天前
|
关系型数据库 应用服务中间件 数据库
编程入门(一)【Web服务器环境的部署】
编程入门(一)【Web服务器环境的部署】
36 1
|
25天前
|
JavaScript 前端开发
基于 Node.js 环境,使用内置 http 模块,创建 Web 服务程序
基于 Node.js 环境,使用内置 http 模块,创建 Web 服务程序
|
1月前
|
前端开发 容器
【Web 前端】清除浮动有哪些方法?
【4月更文挑战第22天】【Web 前端】清除浮动有哪些方法?
|
1月前
|
前端开发 JavaScript UED
【Web 前端】说几个未知宽高元素水平垂直居中方法?
【4月更文挑战第22天】【Web 前端】说几个未知宽高元素水平垂直居中方法?
|
1月前
|
前端开发
【Web 前端】对于数组去重都有哪些方法?
【4月更文挑战第22天】【Web 前端】对于数组去重都有哪些方法?
|
1月前
|
API 数据库 Python
Python web框架fastapi数据库操作ORM(二)增删改查逻辑实现方法
Python web框架fastapi数据库操作ORM(二)增删改查逻辑实现方法
|
1月前
|
存储 缓存 JSON
【Web开发】会话管理与无 Cookie 环境下的实现策略
【Web开发】会话管理与无 Cookie 环境下的实现策略
|
1月前
|
移动开发 JavaScript 前端开发
Web Worker:JavaScript的后台任务解决方案
Web Worker:JavaScript的后台任务解决方案