docs: improve Web Workers documentation with more details (#11737)

* docs: improve Web Workers documentation with more details

* fix

* Update website/docs/zh/guide/features/web-workers.mdx

Co-authored-by: Copilot <[email protected]>

---------

Co-authored-by: Copilot <[email protected]>

Author: chenjiahan

website/docs/en/config/module.mdx

@@ -581,6 +581,8 @@ export default {
 };
 ```
 
+> See [Web Workers](/guide/features/web-workers) for more details.
+
 ### module.parser.javascript.overrideStrict
 
 <ApiMeta addedVersion="1.0.0-alpha.4" />

website/docs/en/guide/features/web-workers.mdx

@@ -10,35 +10,64 @@ Rspack provides built-in support for [Web Workers](https://developer.mozilla.org
 
 ## Usage
 
+Basic Worker creation syntax:
+
 ```js
 new Worker(new URL('./worker.js', import.meta.url));
 ```
 
+You can customize the Worker's chunk name through the `name` property (the property value must be statically analyzable). This name will replace the `[name]` placeholder in the generated chunk filename:
+
 ```js
 new Worker(new URL('./worker.js', import.meta.url), {
-  name: 'my-worker', // <-- When the value of the name property can be statically analyzed, the worker's chunk name can be customized with this property to replace the [name] placeholder when the chunk file is generated
+  name: 'my-worker',
 });
 ```
 
-In addition to `new Worker()`, the following syntax is also supported:
+:::info
+This syntax was chosen for its strong standards compliance. It's built on the standard ECMAScript module specification, which means it works seamlessly even without build tools. For example, it runs natively in modern browsers with ES module support.
+:::
+
+### Additional syntax
+
+In addition to `new Worker()`, Rspack also supports the following syntax by default:
+
+- `new SharedWorker()`, see [SharedWorker](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker)
+
+```js
+const sharedWorker = new SharedWorker(
+  new URL('./shared-worker.js', import.meta.url),
+);
+sharedWorker.port.start();
+```
+
+- `import { Worker } from "node:worker_threads"`: commonly used in Node.js environments, see [Worker threads](https://nodejs.org/api/worker_threads.html)
+
+```js
+import { Worker } from 'node:worker_threads';
+
+const worker = new Worker(new URL('./node-worker.js', import.meta.url));
+```
+
+- `navigator.serviceWorker.register()`: used to register Service Workers, see [ServiceWorkerContainer](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/register)
+
+```js
+navigator.serviceWorker.register('./sw.js').then(registration => {
+  console.log('Service worker registration succeeded:', registration);
+});
+```
 
-- `new SharedWorker()`
-- `import { Worker } from "worker_threads"`: usually used in Node environments
-- `navigator.serviceWorker.register()`: used to register Service Workers
+To support additional custom syntax, you can configure it through [`module.parser.javascript.worker`](/config/module#moduleparserjavascriptworker).
 
-Custom syntax can be provided via [`module.parser.javascript.worker`](/config/module#moduleparserjavascriptworker).
+### Examples
 
-For examples:
+For usage examples, see:
 
 - [examples/worker](https://github.com/rspack-contrib/rstack-examples/tree/main/rspack/worker)
 - [examples/monaco-editor-js](https://github.com/rspack-contrib/rstack-examples/tree/main/rspack/monaco-editor-js)
 - [examples/monaco-editor-ts-react](https://github.com/rspack-contrib/rstack-examples/tree/main/rspack/monaco-editor-ts-react)
 
-:::info
-The syntax was chosen to allow running code without bundler, it is also available in native ECMAScript modules in the browser.
-:::
-
-:::warning
+### Notes
 
 1. Note that `new Worker` can also accept a string representation of a URL, but only passing in URLs is supported in Rspack.
 2. Rspack does not support the use of variables in `new Worker`. For example, the following code will not work:
@@ -52,8 +81,6 @@ The syntax was chosen to allow running code without bundler, it is also availabl
 
 3. Not support `/* webpackEntryOptions: { filename: "workers/[name].js" } */` magic comments for now.
 
-:::
-
 ## worker-loader
 
 :::warning

website/docs/zh/config/module.mdx

@@ -581,6 +581,8 @@ export default {
 };
 ```
 
+> 查看 [Web Workers](/guide/features/web-workers) 了解更多。
+
 ### module.parser.javascript.overrideStrict
 
 <ApiMeta addedVersion="1.0.0-alpha.4" />

website/docs/zh/guide/features/web-workers.mdx

@@ -10,35 +10,64 @@ Rspack 提供了对 [Web Workers](https://developer.mozilla.org/zh-CN/docs/Web/A
 
 ## 使用方式
 
+基本的 Worker 创建语法：
+
 ```js
 new Worker(new URL('./worker.js', import.meta.url));
 ```
 
+通过 `name` 属性可以自定义 Worker 的 chunk 名称（需要属性值可被静态分析），此名称会替换生成的 chunk 文件名中的 `[name]` 占位符：
+
 ```js
 new Worker(new URL('./worker.js', import.meta.url), {
-  name: 'my-worker', // <-- 在可静态分析 name 属性的值时，可通过该属性自定义 worker 的 chunk name，用于替换最终 chunk 文件生成时 [name] 占位符
+  name: 'my-worker',
 });
 ```
 
-除 `new Worker()` 以外还支持以下语法：
+:::info
+选择该语法的原因在于其具备良好的标准兼容性，它基于标准的 ECMAScript 模块规范，即使在没有构建工具的环境中也能正常运行。例如，它可以直接在支持 ES modules 的现代浏览器中执行。
+:::
+
+### 更多语法
+
+除 `new Worker()` 以外，Rspack 还默认支持以下语法：
+
+- `new SharedWorker()`，详见 [SharedWorker](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker)。
+
+```js
+const sharedWorker = new SharedWorker(
+  new URL('./shared-worker.js', import.meta.url),
+);
+sharedWorker.port.start();
+```
+
+- `import { Worker } from "node:worker_threads"`：常用于 Node.js 环境，详见 [Worker threads](https://nodejs.org/api/worker_threads.html)。
+
+```js
+import { Worker } from 'node:worker_threads';
+
+const worker = new Worker(new URL('./node-worker.js', import.meta.url));
+```
+
+- `navigator.serviceWorker.register()`：用于注册 Service Worker，详见 [ServiceWorkerContainer](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/register)。
+
+```js
+navigator.serviceWorker.register('./sw.js').then(registration => {
+  console.log('Service worker registration succeeded:', registration);
+});
+```
 
-- `new SharedWorker()`
-- `import { Worker } from "worker_thread"`：常用于 node 环境
-- `navigator.serviceWorker.register()`：用于注册 Service Worker
+如需支持更多自定义语法，可通过 [`module.parser.javascript.worker`](/config/module#moduleparserjavascriptworker) 配置实现。
 
-可通过 [`module.parser.javascript.worker`](/config/module#moduleparserjavascriptworker) 提供自定义语法。
+### 示例
 
 使用示例可参考：
 
 - [examples/worker](https://github.com/rspack-contrib/rstack-examples/tree/main/rspack/worker)
 - [examples/monaco-editor-js](https://github.com/rspack-contrib/rstack-examples/tree/main/rspack/monaco-editor-js)
 - [examples/monaco-editor-ts-react](https://github.com/rspack-contrib/rstack-examples/tree/main/rspack/monaco-editor-ts-react)
 
-:::info
-选择该语法是因为该语法在不使用打包工具时也能运行代码，它可以直接运行在支持 ES modules 的浏览器上运行，是符合标准的 ECMAScript 语法。
-:::
-
-:::warning
+### 注意事项
 
 1. 需要注意的是 `new Worker` 也可以接受一个 URL 的字符串表示，但在 Rspack 中只支持传入 URL。
 2. Rspack 不支持在 `new Worker` 中使用变量。例如，以下代码将不起作用：
@@ -50,9 +79,7 @@ new Worker(new URL('./worker.js', import.meta.url), {
 
    这是因为 Rspack 无法静态分析该语法。在 Rspack 中使用 Worker 语法时，请务必注意此限制。
 
-3. 目前不支持 `/* webpackEntryOptions: { filename: "workers/[name].js" } */` 魔法注释
-
-:::
+3. 目前不支持 `/* webpackEntryOptions: { filename: "workers/[name].js" } */` 魔法注释。
 
 ## worker-loader
 

website/docs/zh/misc/team/join-us.mdx

@@ -53,6 +53,8 @@ Web Infra 团队正在寻求经验丰富的前端工程师，来共同打造高
 - [前端技术专家 - 构建工具与编译器方向](https://jobs.bytedance.com/experienced/position/7304543984570370341/detail)
 - [前端技术专家 - Lynx 前端框架方向](https://jobs.bytedance.com/experienced/position/7304543795609241907/detail)
 
+> 以上职位工作地点均包括北京、上海、杭州。
+
 ## 📌 岗位要求
 
 - 掌握基于 React 生态和 Node.js 生态的技术栈。