From 7db3df835d84ef004ccad8e010b64629355fdfac Mon Sep 17 00:00:00 2001 From: "gaoyuan.1226" Date: Tue, 22 Oct 2024 18:12:14 +0800 Subject: [PATCH 01/10] docs: add web-worker guide --- website/docs/en/config/output/target.mdx | 6 +-- website/docs/en/guide/basic/_meta.json | 1 + website/docs/en/guide/basic/web-worker.mdx | 50 ++++++++++++++++++++++ website/docs/en/shared/webWorker.mdx | 3 ++ website/docs/zh/config/output/target.mdx | 6 +-- website/docs/zh/guide/basic/_meta.json | 1 + website/docs/zh/guide/basic/web-worker.mdx | 50 ++++++++++++++++++++++ website/docs/zh/shared/webWorker.mdx | 3 ++ 8 files changed, 114 insertions(+), 6 deletions(-) create mode 100644 website/docs/en/guide/basic/web-worker.mdx create mode 100644 website/docs/en/shared/webWorker.mdx create mode 100644 website/docs/zh/guide/basic/web-worker.mdx create mode 100644 website/docs/zh/shared/webWorker.mdx diff --git a/website/docs/en/config/output/target.mdx b/website/docs/en/config/output/target.mdx index 0e984c7d6b..ed86686c8a 100644 --- a/website/docs/en/config/output/target.mdx +++ b/website/docs/en/config/output/target.mdx @@ -76,9 +76,9 @@ When `target` is set to `'node'`, Rsbuild will: Refers to the build target running in the [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) environment. -:::tip Web Worker -A web worker is 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. -::: +import WebWorker from '@en/shared/webWorker.mdx'; + + When `target` is set to `'web-worker'`, Rsbuild will: diff --git a/website/docs/en/guide/basic/_meta.json b/website/docs/en/guide/basic/_meta.json index 946f6e1852..1ed5803fdc 100644 --- a/website/docs/en/guide/basic/_meta.json +++ b/website/docs/en/guide/basic/_meta.json @@ -14,6 +14,7 @@ "typescript", "tailwindcss", "unocss", + "web-worker", "static-deploy", "upgrade-rsbuild" ] diff --git a/website/docs/en/guide/basic/web-worker.mdx b/website/docs/en/guide/basic/web-worker.mdx new file mode 100644 index 0000000000..5da46d21df --- /dev/null +++ b/website/docs/en/guide/basic/web-worker.mdx @@ -0,0 +1,50 @@ +# Use Web Worker + +This chapter introduces how to configure and use [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) in Rsbuild project. + +import WebWorker from '@en/shared/webWorker.mdx'; + + + +## Use Web Worker + +[Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) is first-class citizen of Rspack, which means you don't need any loader to use Web Workers directly in Rspack / Rsbuild project. + +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 +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); +``` + +:::tip +When you use Web Worker, you may encounter CORS exceptions. In this case, you can use [import-web-worker](https://github.com/jantimon/remote-web-worker) or refer to [Discussions -webpack 5 web worker support for CORS?](https://github.com/webpack/webpack/discussions/14648) to get the solution. +::: + +## Build Web Worker outputs + +Rsbuild supports building Web Worker outputs independently, which is helpful when you need to provide Web Worker 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 Worker environment. + +```ts +export default { + output: { + target: 'web-worker', + }, +}; +``` diff --git a/website/docs/en/shared/webWorker.mdx b/website/docs/en/shared/webWorker.mdx new file mode 100644 index 0000000000..21b65a4e97 --- /dev/null +++ b/website/docs/en/shared/webWorker.mdx @@ -0,0 +1,3 @@ +:::tip Web Worker +A web worker is 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. +::: diff --git a/website/docs/zh/config/output/target.mdx b/website/docs/zh/config/output/target.mdx index 450453550b..170a4f1ce5 100644 --- a/website/docs/zh/config/output/target.mdx +++ b/website/docs/zh/config/output/target.mdx @@ -76,9 +76,9 @@ export default { 指运行在 [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) 环境的产物。 -:::tip Web Worker -Web Worker 是一种 JavaScript API，它允许网页在后台线程中执行脚本，与主线程（网页）分离。这意味着，您可以使用 Web Worker 来执行计算密集型或长时间运行的任务，而无需阻塞主线程，进而影响网页的性能。 -::: +import WebWorker from '@zh/shared/webWorker.mdx'; + + 当 `target` 设置为 `'web-worker'` 时，Rsbuild 会进行以下处理： diff --git a/website/docs/zh/guide/basic/_meta.json b/website/docs/zh/guide/basic/_meta.json index 946f6e1852..1ed5803fdc 100644 --- a/website/docs/zh/guide/basic/_meta.json +++ b/website/docs/zh/guide/basic/_meta.json @@ -14,6 +14,7 @@ "typescript", "tailwindcss", "unocss", + "web-worker", "static-deploy", "upgrade-rsbuild" ] diff --git a/website/docs/zh/guide/basic/web-worker.mdx b/website/docs/zh/guide/basic/web-worker.mdx new file mode 100644 index 0000000000..d8c983d8b6 --- /dev/null +++ b/website/docs/zh/guide/basic/web-worker.mdx @@ -0,0 +1,50 @@ +# 使用 Web Worker + +本文将介绍在 Rsbuild 项目中如何配置和使用 [Web Worker](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers)。 + +import WebWorker from '@zh/shared/webWorker.mdx'; + + + +## 使用 Web Worker + +[Web Worker](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers) 是 Rspack 的一等公民，这意味着你不需要任何的 Loader 就可以直接在 Rspack / Rsbuild 项目中使用 Web Worker。详情可参考 [Rspack - Web Worker](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 +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); +``` + +:::tip +当你在使用 Web Worker 时可能遇到跨域问题，此时可以使用 [import-web-worker](https://github.com/jantimon/remote-web-worker) 或参考 [Discussions - webpack 5 web worker support for CORS?](https://github.com/webpack/webpack/discussions/14648) 获得解决方案。 +::: + +## 构建 Web Worker 产物 + +Rsbuild 支持独立构建 Web Worker 产物，这在你需要将 Web Worker 产物提供给其他应用使用时很有帮助。 + +将 Rsbuild 的 [output.target](/config/output/target) 配置项设置为 `'web-worker'` 即可生成适用于 Web Worker 环境的构建产物。 + +```ts +export default { + output: { + target: 'web-worker', + }, +}; +``` diff --git a/website/docs/zh/shared/webWorker.mdx b/website/docs/zh/shared/webWorker.mdx new file mode 100644 index 0000000000..f9fcbaf1d3 --- /dev/null +++ b/website/docs/zh/shared/webWorker.mdx @@ -0,0 +1,3 @@ +:::tip Web Worker +Web Worker 是一种 JavaScript API，它允许网页在后台线程中执行脚本，与主线程（网页）分离。这意味着，您可以使用 Web Worker 来执行计算密集型或长时间运行的任务，而无需阻塞主线程，进而影响网页的性能。 +::: From b70bcaf6e05920fa6add42b4d4509f293a247efd Mon Sep 17 00:00:00 2001 From: 9aoy Date: Tue, 22 Oct 2024 19:15:10 +0800 Subject: [PATCH 02/10] Update website/docs/zh/guide/basic/web-worker.mdx Co-authored-by: neverland --- website/docs/zh/guide/basic/web-worker.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/zh/guide/basic/web-worker.mdx b/website/docs/zh/guide/basic/web-worker.mdx index d8c983d8b6..51edbbd4f5 100644 --- a/website/docs/zh/guide/basic/web-worker.mdx +++ b/website/docs/zh/guide/basic/web-worker.mdx @@ -39,7 +39,7 @@ worker.postMessage(10); Rsbuild 支持独立构建 Web Worker 产物，这在你需要将 Web Worker 产物提供给其他应用使用时很有帮助。 -将 Rsbuild 的 [output.target](/config/output/target) 配置项设置为 `'web-worker'` 即可生成适用于 Web Worker 环境的构建产物。 +将 Rsbuild 的 [output.target](/config/output/target) 配置项设置为 `'web-worker'`，即可生成运行在 Worker 线程的构建产物。 ```ts export default { From 87ed532f1a845edc80c2cd22f87b70fa874ebe53 Mon Sep 17 00:00:00 2001 From: 9aoy Date: Tue, 22 Oct 2024 19:15:16 +0800 Subject: [PATCH 03/10] Update website/docs/en/guide/basic/web-worker.mdx Co-authored-by: neverland --- website/docs/en/guide/basic/web-worker.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/en/guide/basic/web-worker.mdx b/website/docs/en/guide/basic/web-worker.mdx index 5da46d21df..6ac12812e1 100644 --- a/website/docs/en/guide/basic/web-worker.mdx +++ b/website/docs/en/guide/basic/web-worker.mdx @@ -8,7 +8,7 @@ import WebWorker from '@en/shared/webWorker.mdx'; ## Use Web Worker -[Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) is first-class citizen of Rspack, which means you don't need any loader to use Web Workers directly in Rspack / Rsbuild project. +[Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) is first-class citizen 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`: From 2c001d97ccc65b5c5e324d7069280c816668866b Mon Sep 17 00:00:00 2001 From: 9aoy Date: Tue, 22 Oct 2024 19:15:41 +0800 Subject: [PATCH 04/10] Update website/docs/en/guide/basic/web-worker.mdx Co-authored-by: neverland --- website/docs/en/guide/basic/web-worker.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/en/guide/basic/web-worker.mdx b/website/docs/en/guide/basic/web-worker.mdx index 6ac12812e1..f25dede87e 100644 --- a/website/docs/en/guide/basic/web-worker.mdx +++ b/website/docs/en/guide/basic/web-worker.mdx @@ -19,7 +19,7 @@ self.onmessage = (event) => { }; ``` -Then use this Worker in the main thread: +Then use this worker in the main thread: ```js const worker = new Worker(new URL('./worker.js', import.meta.url)); From e982005acfd543acd4f4ffe24d6fff0109b91429 Mon Sep 17 00:00:00 2001 From: 9aoy Date: Tue, 22 Oct 2024 19:15:47 +0800 Subject: [PATCH 05/10] Update website/docs/en/guide/basic/web-worker.mdx Co-authored-by: neverland --- website/docs/en/guide/basic/web-worker.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/en/guide/basic/web-worker.mdx b/website/docs/en/guide/basic/web-worker.mdx index f25dede87e..d71d45d51a 100644 --- a/website/docs/en/guide/basic/web-worker.mdx +++ b/website/docs/en/guide/basic/web-worker.mdx @@ -32,7 +32,7 @@ worker.postMessage(10); ``` :::tip -When you use Web Worker, you may encounter CORS exceptions. In this case, you can use [import-web-worker](https://github.com/jantimon/remote-web-worker) or refer to [Discussions -webpack 5 web worker support for CORS?](https://github.com/webpack/webpack/discussions/14648) to get the solution. +When you use Web Worker, you may encounter CORS exceptions. In this case, you can use [import-web-worker](https://github.com/jantimon/remote-web-worker) or refer to [Discussions - webpack 5 web worker support for CORS?](https://github.com/webpack/webpack/discussions/14648) to get the solution. ::: ## Build Web Worker outputs From 6a9fe328604cbd73df91b84be21ad79239355559 Mon Sep 17 00:00:00 2001 From: "gaoyuan.1226" Date: Tue, 22 Oct 2024 19:45:33 +0800 Subject: [PATCH 06/10] docs: rename Web Worker to Web Workers --- website/docs/en/config/output/target.mdx | 6 ++- website/docs/en/guide/basic/_meta.json | 2 +- website/docs/en/guide/basic/web-worker.mdx | 50 ------------------- website/docs/en/guide/basic/web-workers.mdx | 50 +++++++++++++++++++ .../shared/{webWorker.mdx => webWorkers.mdx} | 4 +- website/docs/zh/config/output/target.mdx | 6 ++- website/docs/zh/guide/basic/_meta.json | 2 +- website/docs/zh/guide/basic/web-worker.mdx | 50 ------------------- website/docs/zh/guide/basic/web-workers.mdx | 50 +++++++++++++++++++ website/docs/zh/shared/webWorker.mdx | 3 -- website/docs/zh/shared/webWorkers.mdx | 3 ++ 11 files changed, 115 insertions(+), 111 deletions(-) delete mode 100644 website/docs/en/guide/basic/web-worker.mdx create mode 100644 website/docs/en/guide/basic/web-workers.mdx rename website/docs/en/shared/{webWorker.mdx => webWorkers.mdx} (82%) delete mode 100644 website/docs/zh/guide/basic/web-worker.mdx create mode 100644 website/docs/zh/guide/basic/web-workers.mdx delete mode 100644 website/docs/zh/shared/webWorker.mdx create mode 100644 website/docs/zh/shared/webWorkers.mdx diff --git a/website/docs/en/config/output/target.mdx b/website/docs/en/config/output/target.mdx index ed86686c8a..59d12a3a91 100644 --- a/website/docs/en/config/output/target.mdx +++ b/website/docs/en/config/output/target.mdx @@ -76,9 +76,9 @@ When `target` is set to `'node'`, Rsbuild will: Refers to the build target running in the [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) environment. -import WebWorker from '@en/shared/webWorker.mdx'; +import WebWorkers from '@en/shared/webWorkers.mdx'; - + When `target` is set to `'web-worker'`, Rsbuild will: @@ -88,6 +88,8 @@ When `target` is set to `'web-worker'`, Rsbuild will: - The default code split strategy will be disabled, and **dynamic import can not work**, because the Web Worker only runs a single JavaScript file. - Disable the HMR. +For more information, please refer to: [Using Web Workers](/guide/basic/web-workers). + ## Other targets [Rspack](https://rspack.dev/config/target) supports other target types, such as `electron-main` and `electron-renderer`. diff --git a/website/docs/en/guide/basic/_meta.json b/website/docs/en/guide/basic/_meta.json index 1ed5803fdc..e1a9c67cff 100644 --- a/website/docs/en/guide/basic/_meta.json +++ b/website/docs/en/guide/basic/_meta.json @@ -14,7 +14,7 @@ "typescript", "tailwindcss", "unocss", - "web-worker", + "web-workers", "static-deploy", "upgrade-rsbuild" ] diff --git a/website/docs/en/guide/basic/web-worker.mdx b/website/docs/en/guide/basic/web-worker.mdx deleted file mode 100644 index d71d45d51a..0000000000 --- a/website/docs/en/guide/basic/web-worker.mdx +++ /dev/null @@ -1,50 +0,0 @@ -# Use Web Worker - -This chapter introduces how to configure and use [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) in Rsbuild project. - -import WebWorker from '@en/shared/webWorker.mdx'; - - - -## Use Web Worker - -[Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) is first-class citizen 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 -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); -``` - -:::tip -When you use Web Worker, you may encounter CORS exceptions. In this case, you can use [import-web-worker](https://github.com/jantimon/remote-web-worker) or refer to [Discussions - webpack 5 web worker support for CORS?](https://github.com/webpack/webpack/discussions/14648) to get the solution. -::: - -## Build Web Worker outputs - -Rsbuild supports building Web Worker outputs independently, which is helpful when you need to provide Web Worker 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 Worker environment. - -```ts -export default { - output: { - target: 'web-worker', - }, -}; -``` diff --git a/website/docs/en/guide/basic/web-workers.mdx b/website/docs/en/guide/basic/web-workers.mdx new file mode 100644 index 0000000000..3421338292 --- /dev/null +++ b/website/docs/en/guide/basic/web-workers.mdx @@ -0,0 +1,50 @@ +# 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'; + + + +## Use Web Workers + +[Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) is first-class citizen 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 +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); +``` + +:::tip +When you use Web Workers, you may encounter CORS exceptions. In this case, you can use [import-web-worker](https://github.com/jantimon/remote-web-worker) or refer to [Discussions - webpack 5 web worker support for CORS?](https://github.com/webpack/webpack/discussions/14648) to get the solution. +::: + +## 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', + }, +}; +``` diff --git a/website/docs/en/shared/webWorker.mdx b/website/docs/en/shared/webWorkers.mdx similarity index 82% rename from website/docs/en/shared/webWorker.mdx rename to website/docs/en/shared/webWorkers.mdx index 21b65a4e97..f2891a054a 100644 --- a/website/docs/en/shared/webWorker.mdx +++ b/website/docs/en/shared/webWorkers.mdx @@ -1,3 +1,3 @@ -:::tip Web Worker -A web worker is 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. +:::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. ::: diff --git a/website/docs/zh/config/output/target.mdx b/website/docs/zh/config/output/target.mdx index 170a4f1ce5..47abd7a33d 100644 --- a/website/docs/zh/config/output/target.mdx +++ b/website/docs/zh/config/output/target.mdx @@ -76,9 +76,9 @@ export default { 指运行在 [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) 环境的产物。 -import WebWorker from '@zh/shared/webWorker.mdx'; +import WebWorkers from '@zh/shared/webWorkers.mdx'; - + 当 `target` 设置为 `'web-worker'` 时，Rsbuild 会进行以下处理： @@ -88,6 +88,8 @@ import WebWorker from '@zh/shared/webWorker.mdx'; - 不会开启默认的拆包策略，**并且 dynamic import 也不会生效**，因为 Web Worker 仅运行支持单个 JavaScript 文件。 - 不会开启热更新相关的能力。 +更多信息可参考 [使用 Web Workers](/guide/basic/web-workers)。 + ## 其他 target Rspack 支持的 [target](https://rspack.dev/config/target) 类型更为丰富，比如 `electron-main` 和 `electron-renderer` 等。 diff --git a/website/docs/zh/guide/basic/_meta.json b/website/docs/zh/guide/basic/_meta.json index 1ed5803fdc..e1a9c67cff 100644 --- a/website/docs/zh/guide/basic/_meta.json +++ b/website/docs/zh/guide/basic/_meta.json @@ -14,7 +14,7 @@ "typescript", "tailwindcss", "unocss", - "web-worker", + "web-workers", "static-deploy", "upgrade-rsbuild" ] diff --git a/website/docs/zh/guide/basic/web-worker.mdx b/website/docs/zh/guide/basic/web-worker.mdx deleted file mode 100644 index 51edbbd4f5..0000000000 --- a/website/docs/zh/guide/basic/web-worker.mdx +++ /dev/null @@ -1,50 +0,0 @@ -# 使用 Web Worker - -本文将介绍在 Rsbuild 项目中如何配置和使用 [Web Worker](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers)。 - -import WebWorker from '@zh/shared/webWorker.mdx'; - - - -## 使用 Web Worker - -[Web Worker](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers) 是 Rspack 的一等公民，这意味着你不需要任何的 Loader 就可以直接在 Rspack / Rsbuild 项目中使用 Web Worker。详情可参考 [Rspack - Web Worker](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 -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); -``` - -:::tip -当你在使用 Web Worker 时可能遇到跨域问题，此时可以使用 [import-web-worker](https://github.com/jantimon/remote-web-worker) 或参考 [Discussions - webpack 5 web worker support for CORS?](https://github.com/webpack/webpack/discussions/14648) 获得解决方案。 -::: - -## 构建 Web Worker 产物 - -Rsbuild 支持独立构建 Web Worker 产物，这在你需要将 Web Worker 产物提供给其他应用使用时很有帮助。 - -将 Rsbuild 的 [output.target](/config/output/target) 配置项设置为 `'web-worker'`，即可生成运行在 Worker 线程的构建产物。 - -```ts -export default { - output: { - target: 'web-worker', - }, -}; -``` diff --git a/website/docs/zh/guide/basic/web-workers.mdx b/website/docs/zh/guide/basic/web-workers.mdx new file mode 100644 index 0000000000..11725074e0 --- /dev/null +++ b/website/docs/zh/guide/basic/web-workers.mdx @@ -0,0 +1,50 @@ +# 使用 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'; + + + +## 使用 Web Workers + +[Web Workers](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_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 +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); +``` + +:::tip +当你在使用 Web Workers 时可能遇到跨域问题，此时可以使用 [import-web-worker](https://github.com/jantimon/remote-web-worker) 或参考 [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', + }, +}; +``` diff --git a/website/docs/zh/shared/webWorker.mdx b/website/docs/zh/shared/webWorker.mdx deleted file mode 100644 index f9fcbaf1d3..0000000000 --- a/website/docs/zh/shared/webWorker.mdx +++ /dev/null @@ -1,3 +0,0 @@ -:::tip Web Worker -Web Worker 是一种 JavaScript API，它允许网页在后台线程中执行脚本，与主线程（网页）分离。这意味着，您可以使用 Web Worker 来执行计算密集型或长时间运行的任务，而无需阻塞主线程，进而影响网页的性能。 -::: diff --git a/website/docs/zh/shared/webWorkers.mdx b/website/docs/zh/shared/webWorkers.mdx new file mode 100644 index 0000000000..b84fe7e7df --- /dev/null +++ b/website/docs/zh/shared/webWorkers.mdx @@ -0,0 +1,3 @@ +:::tip Web Workers +Web Workers 是一种 JavaScript API，它允许网页在后台线程中执行脚本，与主线程（网页）分离。这意味着，您可以使用 Web Workers 来执行计算密集型或长时间运行的任务，而无需阻塞主线程，进而影响网页的性能。 +::: From 5ca61e9a9d23ab2a7768bc40deb3957d5a11deaa Mon Sep 17 00:00:00 2001 From: "gaoyuan.1226" Date: Tue, 22 Oct 2024 19:46:59 +0800 Subject: [PATCH 07/10] docs: link to web-workers guide --- website/docs/en/config/output/target.mdx | 4 ---- website/docs/zh/config/output/target.mdx | 4 ---- 2 files changed, 8 deletions(-) diff --git a/website/docs/en/config/output/target.mdx b/website/docs/en/config/output/target.mdx index 59d12a3a91..a0d7d33a28 100644 --- a/website/docs/en/config/output/target.mdx +++ b/website/docs/en/config/output/target.mdx @@ -76,10 +76,6 @@ When `target` is set to `'node'`, Rsbuild will: Refers to the build target running in the [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) environment. -import WebWorkers from '@en/shared/webWorkers.mdx'; - - - When `target` is set to `'web-worker'`, Rsbuild will: - Set Rspack's [target](https://rspack.dev/config/target) to `'webworker'`. diff --git a/website/docs/zh/config/output/target.mdx b/website/docs/zh/config/output/target.mdx index 47abd7a33d..4c47041e4c 100644 --- a/website/docs/zh/config/output/target.mdx +++ b/website/docs/zh/config/output/target.mdx @@ -76,10 +76,6 @@ export default { 指运行在 [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) 环境的产物。 -import WebWorkers from '@zh/shared/webWorkers.mdx'; - - - 当 `target` 设置为 `'web-worker'` 时，Rsbuild 会进行以下处理： - 将 Rspack 的 [target](https://rspack.dev/config/target) 设置为 `'webworker'`。 From 94430786111c7dcd3b2bdb4960cc6af394f991ab Mon Sep 17 00:00:00 2001 From: "gaoyuan.1226" Date: Wed, 23 Oct 2024 11:21:16 +0800 Subject: [PATCH 08/10] docs: add cors issue introduce --- website/docs/en/guide/basic/web-workers.mdx | 28 +++++++++++++++++---- website/docs/zh/guide/basic/web-workers.mdx | 27 ++++++++++++++++---- 2 files changed, 45 insertions(+), 10 deletions(-) diff --git a/website/docs/en/guide/basic/web-workers.mdx b/website/docs/en/guide/basic/web-workers.mdx index 3421338292..755bf49600 100644 --- a/website/docs/en/guide/basic/web-workers.mdx +++ b/website/docs/en/guide/basic/web-workers.mdx @@ -8,7 +8,7 @@ import WebWorkers from '@en/shared/webWorkers.mdx'; ## Use Web Workers -[Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) is first-class citizen of Rspack, which means you don't need any loader to use web workers directly in Rspack or Rsbuild projects. +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`: @@ -21,7 +21,7 @@ self.onmessage = (event) => { Then use this worker in the main thread: -```js +```js title=index.js const worker = new Worker(new URL('./worker.js', import.meta.url)); worker.onmessage = (event) => { @@ -31,9 +31,27 @@ worker.onmessage = (event) => { worker.postMessage(10); ``` -:::tip -When you use Web Workers, you may encounter CORS exceptions. In this case, you can use [import-web-worker](https://github.com/jantimon/remote-web-worker) or refer to [Discussions - webpack 5 web worker support for CORS?](https://github.com/webpack/webpack/discussions/14648) to get the solution. -::: +### Loading scripts from remote URLs (cross-origin) + +By default, worker scripts are output as a separate chunk. Worker scripts support uploading to CDN, but you may encounter cross-domain issues when using remote scripts. 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 diff --git a/website/docs/zh/guide/basic/web-workers.mdx b/website/docs/zh/guide/basic/web-workers.mdx index 11725074e0..dca803e9c2 100644 --- a/website/docs/zh/guide/basic/web-workers.mdx +++ b/website/docs/zh/guide/basic/web-workers.mdx @@ -8,7 +8,7 @@ import WebWorkers from '@zh/shared/webWorkers.mdx'; ## 使用 Web Workers -[Web Workers](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers) 是 Rspack 的一等公民，这意味着你不需要任何的 Loader 就可以直接在 Rspack / Rsbuild 项目中使用 Web Workers。详情可参考 [Rspack - Web Workers](https://rspack.dev/zh/guide/features/web-workers)。 +Web Workers 是 Rspack 的一等公民，这意味着你不需要任何的 Loader 就可以直接在 Rspack / Rsbuild 项目中使用 Web Workers。详情可参考 [Rspack - Web Workers](https://rspack.dev/zh/guide/features/web-workers)。 例如，创建一个名为 worker.js 的文件： @@ -21,7 +21,7 @@ self.onmessage = (event) => { 然后在主线程中使用这个 worker： -```js +```js title=index.js const worker = new Worker(new URL('./worker.js', import.meta.url)); worker.onmessage = (event) => { @@ -31,9 +31,26 @@ worker.onmessage = (event) => { worker.postMessage(10); ``` -:::tip -当你在使用 Web Workers 时可能遇到跨域问题，此时可以使用 [import-web-worker](https://github.com/jantimon/remote-web-worker) 或参考 [Discussions - webpack 5 web worker support for CORS?](https://github.com/webpack/webpack/discussions/14648) 获得解决方案。 -::: +### 从远程 URL 加载脚本（跨域） + +默认情况下，worker 脚本会输出成一个独立的 chunk。worker 脚本支持上传到 CDN，但在加载远程脚本时可能会遇到跨域问题。常见解法是通过 [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 产物 From dd5f11c3dab5675be87a9894c7e5a9c00446b8c2 Mon Sep 17 00:00:00 2001 From: "gaoyuan.1226" Date: Wed, 23 Oct 2024 11:34:59 +0800 Subject: [PATCH 09/10] docs: update --- website/docs/en/guide/basic/web-workers.mdx | 5 +++-- website/docs/zh/guide/basic/web-workers.mdx | 4 +++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/website/docs/en/guide/basic/web-workers.mdx b/website/docs/en/guide/basic/web-workers.mdx index 755bf49600..ac7e7a6712 100644 --- a/website/docs/en/guide/basic/web-workers.mdx +++ b/website/docs/en/guide/basic/web-workers.mdx @@ -33,8 +33,9 @@ worker.postMessage(10); ### Loading scripts from remote URLs (cross-origin) -By default, worker scripts are output as a separate chunk. Worker scripts support uploading to CDN, but you may encounter cross-domain issues when using remote scripts. 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: +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 diff --git a/website/docs/zh/guide/basic/web-workers.mdx b/website/docs/zh/guide/basic/web-workers.mdx index dca803e9c2..b7a8ccc2d8 100644 --- a/website/docs/zh/guide/basic/web-workers.mdx +++ b/website/docs/zh/guide/basic/web-workers.mdx @@ -33,7 +33,9 @@ worker.postMessage(10); ### 从远程 URL 加载脚本（跨域） -默认情况下，worker 脚本会输出成一个独立的 chunk。worker 脚本支持上传到 CDN，但在加载远程脚本时可能会遇到跨域问题。常见解法是通过 [importScripts](https://developer.mozilla.org/zh-CN/docs/Web/API/WorkerGlobalScope/importScripts) (不受 CORS 约束) 加载。可参考如下代码： +默认情况下，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 From ed47fe96eb28d8b8ce8b3501d4a54137bb1e791e Mon Sep 17 00:00:00 2001 From: "gaoyuan.1226" Date: Wed, 23 Oct 2024 15:53:03 +0800 Subject: [PATCH 10/10] docs: remove webWorkders.mdx --- website/docs/en/guide/basic/web-workers.mdx | 6 +++--- website/docs/en/shared/webWorkers.mdx | 3 --- website/docs/zh/guide/basic/web-workers.mdx | 6 +++--- website/docs/zh/shared/webWorkers.mdx | 3 --- 4 files changed, 6 insertions(+), 12 deletions(-) delete mode 100644 website/docs/en/shared/webWorkers.mdx delete mode 100644 website/docs/zh/shared/webWorkers.mdx diff --git a/website/docs/en/guide/basic/web-workers.mdx b/website/docs/en/guide/basic/web-workers.mdx index ac7e7a6712..8db64ca09c 100644 --- a/website/docs/en/guide/basic/web-workers.mdx +++ b/website/docs/en/guide/basic/web-workers.mdx @@ -2,9 +2,9 @@ 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'; - - +:::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. +::: ## Use Web Workers diff --git a/website/docs/en/shared/webWorkers.mdx b/website/docs/en/shared/webWorkers.mdx deleted file mode 100644 index f2891a054a..0000000000 --- a/website/docs/en/shared/webWorkers.mdx +++ /dev/null @@ -1,3 +0,0 @@ -:::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. -::: diff --git a/website/docs/zh/guide/basic/web-workers.mdx b/website/docs/zh/guide/basic/web-workers.mdx index b7a8ccc2d8..319e30139c 100644 --- a/website/docs/zh/guide/basic/web-workers.mdx +++ b/website/docs/zh/guide/basic/web-workers.mdx @@ -2,9 +2,9 @@ 本文将介绍在 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'; - - +:::tip Web Workers +Web Workers 是一种 JavaScript API，它允许网页在后台线程中执行脚本，与主线程（网页）分离。这意味着，您可以使用 Web Workers 来执行计算密集型或长时间运行的任务，而无需阻塞主线程，进而影响网页的性能。 +::: ## 使用 Web Workers diff --git a/website/docs/zh/shared/webWorkers.mdx b/website/docs/zh/shared/webWorkers.mdx deleted file mode 100644 index b84fe7e7df..0000000000 --- a/website/docs/zh/shared/webWorkers.mdx +++ /dev/null @@ -1,3 +0,0 @@ -:::tip Web Workers -Web Workers 是一种 JavaScript API，它允许网页在后台线程中执行脚本，与主线程（网页）分离。这意味着，您可以使用 Web Workers 来执行计算密集型或长时间运行的任务，而无需阻塞主线程，进而影响网页的性能。 -:::