-
Notifications
You must be signed in to change notification settings - Fork 131
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs: add guide for using Web Workers #3795
Merged
Merged
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit
Hold shift + click to select a range
7db3df8
docs: add web-worker guide
9aoy b70bcaf
Update website/docs/zh/guide/basic/web-worker.mdx
9aoy 87ed532
Update website/docs/en/guide/basic/web-worker.mdx
9aoy 2c001d9
Update website/docs/en/guide/basic/web-worker.mdx
9aoy e982005
Update website/docs/en/guide/basic/web-worker.mdx
9aoy 6a9fe32
docs: rename Web Worker to Web Workers
9aoy 5ca61e9
docs: link to web-workers guide
9aoy 9443078
docs: add cors issue introduce
9aoy dd5f11c
docs: update
9aoy ed47fe9
docs: remove webWorkders.mdx
9aoy File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -14,6 +14,7 @@ | |
"typescript", | ||
"tailwindcss", | ||
"unocss", | ||
"web-workers", | ||
"static-deploy", | ||
"upgrade-rsbuild" | ||
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
# Use Web Workers | ||
|
||
This chapter introduces how to configure and use [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) in Rsbuild project. | ||
|
||
import WebWorkers from '@en/shared/webWorkers.mdx'; | ||
|
||
<WebWorkers /> | ||
|
||
## Use Web Workers | ||
|
||
Web Workers are first-class citizens of Rspack, which means you don't need any loader to use web workers directly in Rspack or Rsbuild projects. | ||
|
||
For example, create a file called `worker.js`: | ||
|
||
```js title=worker.js | ||
self.onmessage = (event) => { | ||
const result = event.data * 2; | ||
self.postMessage(result); | ||
}; | ||
``` | ||
|
||
Then use this worker in the main thread: | ||
|
||
```js title=index.js | ||
const worker = new Worker(new URL('./worker.js', import.meta.url)); | ||
|
||
worker.onmessage = (event) => { | ||
console.log('The results from Workers:', event.data); | ||
}; | ||
|
||
worker.postMessage(10); | ||
``` | ||
|
||
### Loading scripts from remote URLs (cross-origin) | ||
|
||
By default, the worker script will be emitted as a separate chunk. This script supports uploading to CDN, but must obey the [same-origin policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy). | ||
|
||
If you want your worker scripts to be accessible across domains, a common solution is to load via [importScripts](https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/importScripts) (not subject to CORS), you can refer to the following code: | ||
|
||
```js title=index.js {2} | ||
// https://github.com/jantimon/remote-web-worker | ||
import 'remote-web-worker'; | ||
|
||
const worker = new Worker(new URL('./worker.js', import.meta.url), { | ||
type: 'classic', | ||
}); | ||
|
||
worker.onmessage = (event) => { | ||
console.log('The results from Workers:', event.data); | ||
}; | ||
|
||
worker.postMessage(10); | ||
``` | ||
|
||
For detailed discussions on cross-domain issues, please refer to [Discussions - webpack 5 web worker support for CORS?](https://github.com/webpack/webpack/discussions/14648) | ||
|
||
## Build Web Workers outputs | ||
|
||
Rsbuild supports building Web Workers outputs independently, which is helpful when you need to provide Web Workers outputs for use by other applications. | ||
|
||
You can set Rsbuild's [output.target](/config/output/target) configuration to `'web-worker'`, and Rsbuild will generate build outputs suitable for the Web Workers environment. | ||
|
||
```ts | ||
export default { | ||
output: { | ||
target: 'web-worker', | ||
}, | ||
}; | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
:::tip Web Workers | ||
Web Workers are a type of JavaScript program that runs in the background, independently of other scripts, without affecting the performance of the page. This makes it possible to run long-running scripts, such as ones that handle complex calculations or access remote resources, without blocking the user interface or other scripts. Web workers provide an easy way to run tasks in the background and improve the overall performance of web applications. | ||
::: |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -14,6 +14,7 @@ | |
"typescript", | ||
"tailwindcss", | ||
"unocss", | ||
"web-workers", | ||
"static-deploy", | ||
"upgrade-rsbuild" | ||
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
# 使用 Web Workers | ||
|
||
本文将介绍在 Rsbuild 项目中如何配置和使用 [Web Workers](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers)。 | ||
|
||
import WebWorkers from '@zh/shared/webWorkers.mdx'; | ||
|
||
<WebWorkers /> | ||
|
||
## 使用 Web Workers | ||
|
||
Web Workers 是 Rspack 的一等公民,这意味着你不需要任何的 Loader 就可以直接在 Rspack / Rsbuild 项目中使用 Web Workers。详情可参考 [Rspack - Web Workers](https://rspack.dev/zh/guide/features/web-workers)。 | ||
|
||
例如,创建一个名为 worker.js 的文件: | ||
|
||
```js title=worker.js | ||
self.onmessage = (event) => { | ||
const result = event.data * 2; | ||
self.postMessage(result); | ||
}; | ||
``` | ||
|
||
然后在主线程中使用这个 worker: | ||
|
||
```js title=index.js | ||
const worker = new Worker(new URL('./worker.js', import.meta.url)); | ||
|
||
worker.onmessage = (event) => { | ||
console.log('The results from Workers:', event.data); | ||
}; | ||
|
||
worker.postMessage(10); | ||
``` | ||
|
||
### 从远程 URL 加载脚本(跨域) | ||
|
||
默认情况下,worker 脚本会输出成一个独立的 chunk。worker 脚本支持上传到 CDN,但在加载远程脚本时需要遵守[同源策略](https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy)。 | ||
|
||
如果你希望你的 worker 脚本可以跨域访问,常见解法是通过 [importScripts](https://developer.mozilla.org/zh-CN/docs/Web/API/WorkerGlobalScope/importScripts) (不受 CORS 约束) 加载,可参考如下代码: | ||
|
||
```js title=index.js {2} | ||
// https://github.com/jantimon/remote-web-worker | ||
import 'remote-web-worker'; | ||
|
||
const worker = new Worker(new URL('./worker.js', import.meta.url), { | ||
type: 'classic', | ||
}); | ||
|
||
worker.onmessage = (event) => { | ||
console.log('The results from Workers:', event.data); | ||
}; | ||
|
||
worker.postMessage(10); | ||
``` | ||
|
||
关于跨域问题的详细讨论可参考 [Discussions - webpack 5 web worker support for CORS?](https://github.com/webpack/webpack/discussions/14648) | ||
|
||
## 构建 Web Workers 产物 | ||
|
||
Rsbuild 支持独立构建 Web Workers 产物,这在你需要将 Web Workers 产物提供给其他应用使用时很有帮助。 | ||
|
||
将 Rsbuild 的 [output.target](/config/output/target) 配置项设置为 `'web-worker'`,即可生成运行在 Worker 线程的构建产物。 | ||
|
||
```ts | ||
export default { | ||
output: { | ||
target: 'web-worker', | ||
}, | ||
}; | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
:::tip Web Workers | ||
Web Workers 是一种 JavaScript API,它允许网页在后台线程中执行脚本,与主线程(网页)分离。这意味着,您可以使用 Web Workers 来执行计算密集型或长时间运行的任务,而无需阻塞主线程,进而影响网页的性能。 | ||
::: |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
webWorkers.mdx
is only used by current mdx, do we need to split it?