webpack5 09 webworker-一一网

首先得明白什么是webworker, 大致上理解就是web端得多线程。在里面做任何事情不阻塞线程，但是里面不能执行dom操作。

这是前提，很早就有了，详情可见这个阮一峰这这篇文章

www.ruanyifeng.com/blog/2018/0…

在webpack中的应用

deep-thought.js

self.onmessage = ({ data: { question } }) => {
    self.postMessage({
      answer: 42,
    });
  };
复制代码

index.js

const worker = new Worker(new URL('./deep-thought.js', import.meta.url));
worker.postMessage({
  question:
    'The Answer to the Ultimate Question of Life, The Universe, and Everything.',
});
worker.onmessage = ({ data: { answer } }) => {
  console.log(answer);
};
复制代码

这两个就成了，返回 answer 等于 42

webworker 是不能本地调试的，随便运行一个服务来调试吧

2 参数

一般我们用 webworker 都是下面这样

new Worker("http.....")
复制代码

是有一个直接地址的，你也可以在 webpack 中直接这样写,但是这样很不方便

如果你直接引用 /dist 中的地址，每改一次，这里也需要改，还需要进行前缀的配置。

我原以为是 URL 来拼接这个地址

new Worker(new URL('./deep-thought.js', import.meta.url));
复制代码

加入了 import.meta.url 就可以根据浏览器信息自动得出结论，我发觉我想多了

const o = new Worker(new URL(r.p + r.u(415), r.b))

r.b = document.baseURI || self.location.href

r.p = e

e = r.g.location + ""

r.g = function () { 
    if ("object" == typeof globalThis) 
        return globalThis; 
    try { 
        return this || new Function("return this")() 
    } catch (e) { 
        if ("object" == typeof window) return window 
    } 
}()
复制代码

看到这里就明白了吧。

其实主要还是 webpack 的解析，是否使用 URL 不太重要.

2.1 URL

new URL("https://www.baidu.com")
URL {origin: "https://www.baidu.com", protocol: "https:", username: "", password: "", host: "www.baidu.com", …}
hash: ""
host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/"
origin: "https://www.baidu.com"
password: ""
pathname: "/"
port: ""
protocol: "https:"
search: ""
searchParams: URLSearchParams {}
username: ""
复制代码

能够返回这些参数，其实返回参数是和 window.location 差不多的, 但是它可以返回其他网页的信息

具体api参见这里

developer.mozilla.org/zh-CN/docs/…

caniuse.com/?search=URL