Merge pull request #807 from vitejs/dev

docs(cn): update with mainstream

Author: waynzh

.vitepress/theme/components/AsideSponsors.vue

@@ -18,5 +18,68 @@ const sponsors = computed(() => {
 </script>
 
 <template>
+  <a class="viteconf" href="https://viteconf.org/23" target="_blank">
+    <img width="22" height="22" src="/viteconf.svg" />
+    <span>
+      <p class="extra-info">Free Online Conference</p>
+      <p class="heading">ViteConf 23 - Oct 5</p>
+      <p class="extra-info">Get your ticket now!</p>
+    </span>
+  </a>
   <VPDocAsideSponsors v-if="data" :data="sponsors" />
 </template>
+
+<style>
+.viteconf {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  border-radius: 14px;
+  padding-left: 2.5rem;
+  padding-top: 0.4rem;
+  padding-bottom: 0.4rem;
+  position: relative;
+  font-size: 0.9rem;
+  font-weight: 700;
+  line-height: 1.1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  background-color: var(--vp-c-bg-alt);
+  border: 2px solid var(--vp-c-bg-alt);
+  transition: border-color 0.5s;
+}
+.viteconf:hover {
+  border: 2px solid var(--vp-c-brand-light);
+}
+.viteconf img {
+  position: absolute;
+  left: 1.5rem;
+  transition: transform 0.5s;
+  transform: scale(1.25);
+}
+.viteconf:hover img {
+  transform: scale(1.75);
+}
+.viteconf .heading {
+  background-image: linear-gradient(
+    120deg,
+    #b047ff 16%,
+    var(--vp-c-brand-lighter),
+    var(--vp-c-brand-lighter)
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.viteconf .extra-info {
+  color: var(--vp-c-text-1);
+  opacity: 0;
+  font-size: 0.7rem;
+  padding-left: 0.1rem;
+  transition: opacity 0.5s;
+}
+.viteconf:hover .extra-info {
+  opacity: 0.9;
+}
+</style>

guide/cli.md

@@ -14,8 +14,8 @@ vite [root]
 
 #### 选项 {#options}
 
-| 选项                     |                                              |
-| ------------------------ | ------------------------------------------- |
+| 选项                     |                                                                                         |
+| ------------------------ | -------------------------------------------------------------------------------------- |
 | `--host [host]`          | 指定主机名称 (`string`) |
 | `--port <port>`          | 指定端口 (`number`) |
 | `--https`                | 使用 TLS + HTTP/2 (`boolean`) |
@@ -27,6 +27,7 @@ vite [root]
 | `--base <path>`          | 公共基础路径（默认为：`/`）(`string`) |
 | `-l, --logLevel <level>` | Info \| warn \| error \| silent (`string`) |
 | `--clearScreen`          | 允许或禁用打印日志时清除屏幕 (`boolean`) |
+| `--profile`              | 启动内置的 Node.js 调试器（查看 [性能瓶颈](/guide/troubleshooting#performance-bottlenecks)）|
 | `-d, --debug [feat]`     | 显示调试日志 (`string \| boolean`) |
 | `-f, --filter <filter>`  | 过滤调试日志 (`string`) |
 | `-m, --mode <mode>`      | 设置环境模式 (`string`) |
@@ -65,6 +66,7 @@ vite build [root]
 | `--base <path>`                | 公共基础路径（默认为：`/`）(`string`) |
 | `-l, --logLevel <level>`       | Info \| warn \| error \| silent (`string`) |
 | `--clearScreen`                | 允许或禁用打印日志时清除屏幕 (`boolean`) |
+| `--profile`                    | 启动内置的 Node.js 调试器（查看 [性能瓶颈](/guide/troubleshooting#performance-bottlenecks)）|
 | `-d, --debug [feat]`           | 显示调试日志 (`string \| boolean`) |
 | `-f, --filter <filter>`        | 过滤调试日志 (`string`) |
 | `-m, --mode <mode>`            | 设置环境模式 (`string`) |

guide/features.md

@@ -500,7 +500,8 @@ const module = await import(`./dir/${file}.js`)
 
 ## WebAssembly {#webassembly}
 
-预编译的 `.wasm` 文件可以通过 `?init` 来导入。默认导出一个初始化函数，返回值为所导出 wasm 实例对象的 Promise：
+预编译的 `.wasm` 文件可以通过 `?init` 来导入。
+默认导出一个初始化函数，返回值为所导出 [`WebAssembly.Instance`](https://developer.mozilla.org/en-US/docs/WebAssembly/JavaScript_interface/Instance) 实例对象的 Promise：
 
 ```js
 import init from './example.wasm?init'
@@ -510,7 +511,7 @@ init().then((instance) => {
 })
 ```
 
-`init` 函数还可以将传递给 `WebAssembly.instantiate` 的导入对象作为其第二个参数：
+`init` 函数还可以将传递给 [`WebAssembly.instantiate`](https://developer.mozilla.org/en-US/docs/WebAssembly/JavaScript_interface/instantiate) 的导入对象作为其第二个参数：
 
 ```js
 init({
@@ -524,13 +525,54 @@ init({
 })
 ```
 
-在生产构建当中，体积小于 `assetInlineLimit` 的 `.wasm` 文件将会被内联为 base64 字符串。否则，它们将作为资源复制到 `dist` 目录中，并按需获取。
+在生产构建当中，体积小于 `assetInlineLimit` 的 `.wasm` 文件将会被内联为 base64 字符串。否则，它们将被视为 [静态资源](./assets) ，并按需获取。
 
-::: warning
+::: tip 注意
 [对 WebAssembly 的 ES 模块集成提案](https://github.com/WebAssembly/esm-integration) 尚未支持。
 请使用 [`vite-plugin-wasm`](https://github.com/Menci/vite-plugin-wasm) 或其他社区上的插件来处理。
 :::
 
+### 访问 WebAssembly 模块 {#accessing-the-webassembly-module}
+
+如果需要访问 `Module` 对象，例如将它多次实例化，可以使用 [显式 URL 引入](./assets#explicit-url-imports) 来解析资源，然后执行实例化：
+
+```js
+import wasmUrl from 'foo.wasm?url'
+
+const main = async () => {
+  const responsePromise = fetch(wasmUrl)
+  const { module, instance } = await WebAssembly.instantiateStreaming(
+    responsePromise,
+  )
+  /* ... */
+}
+
+main()
+```
+
+### 在 Node.js 中获取模块 {#fetching-the-module-in-node-js}
+
+在 SSR 中，作为 `?init` 导入的 `fetch()` 可能会失败，导致 `TypeError: Invalid URL` 报错。
+请参见问题 [在 SSR 中支持 wasm](https://github.com/vitejs/vite/issues/8882)。
+
+以下是一种替代方案，假设项目根目录在当前目录：
+
+```js
+import wasmUrl from 'foo.wasm?url'
+import { readFile } from 'node:fs/promises'
+
+const main = async () => {
+  const resolvedUrl = (await import('./test/boot.test.wasm?url')).default
+  const buffer = await readFile('.' + resolvedUrl)
+  const { instance } = await WebAssembly.instantiate(buffer, {
+    /* ... */
+  })
+  /* ... */
+}
+
+main()
+```
+
 ## Web Workers {#web-workers}
 
 ### 通过构造器导入 {#import-with-constructors}
@@ -559,7 +601,7 @@ import MyWorker from './worker?worker'
 const worker = new MyWorker()
 ```
 
-Worker 脚本也可以使用 ESM 的 `import` 语句来替代 `importScripts()` —— **注意**，在开发过程中，这依赖于[浏览器原生支持](https://caniuse.com/?search=module%20worker)（目前在 Firefox 中不支持），而在生产版本中，它已经被编译掉了。
+这个 worker 脚本也可以使用 ESM `import` 语句而不是 `importScripts()`。**注意**：在开发时，这依赖于 [浏览器原生支持](https://caniuse.com/?search=module%20worker)，但是在生产构建中，它会被编译掉。
 
 默认情况下，worker 脚本将在生产构建中编译成单独的 chunk。如果你想将 worker 内联为 base64 字符串，请添加 `inline` 查询参数：
 

guide/static-deploy.md

@@ -337,3 +337,7 @@ $ npx wrangler pages publish dist
 ## Flightcontrol
 
 使用 [Flightcontrol](https://www.flightcontrol.dev/?ref=docs-vite) 部署静态站点，可以按照 [说明](https://www.flightcontrol.dev/docs/reference/examples/vite?ref=docs-vite) 进行操作。
+
+## AWS Amplify 部署 {#aws-amplify-hoisting}
+
+使用 [AWS Amplify 部署](https://aws.amazon.com/amplify/hosting/) 部署静态站点，可以按照 [说明](https://docs.amplify.aws/guides/hosting/vite/q/platform/js/) 进行操作。

guide/troubleshooting.md

@@ -144,9 +144,31 @@ import './Foo.js' // 应该为 './foo.js'
 
 在 Vite 中通过一个哈希值来决定优化后的依赖项是否有效，这个值取决于包锁定的内容、应用于依赖项的补丁以及 Vite 配置文件中影响 node_modules 打包的选项。这意味着，当使用像 [npm overrides](https://docs.npmjs.com/cli/v9/configuring-npm/package-json#overrides) 这样的功能覆盖依赖项时，Vite 将检测到，并在下一次服务器启动时重新打包您的依赖项。当您使用像 [npm link](https://docs.npmjs.com/cli/v9/commands/npm-link) 这样的功能时，Vite 不会使依赖项无效。如果您链接或取消链接一个依赖项，那么您需要使用 `vite --force` 在下一次服务器启动时强制重新预构建。我们建议使用 overrides，它们现在被每个包管理器所支持（还可以参见 [pnpm overrides](https://pnpm.io/package_json#pnpmoverrides) 和 [yarn resolutions](https://yarnpkg.com/configuration/manifest/#resolutions)）。
 
+## 性能瓶颈 {#performance-bottlenecks}
+
+如果你遇到应用程序性能瓶颈导致加载缓慢，可以在启动 Vite 开发服务器或在构建应用程序时使用内置的 Node.js 调试器来创建 CPU 性能分析文件：
+
+::: code-group
+
+```bash [dev server]
+vite --profile --open
+```
+
+```bash [build]
+vite build --profile
+```
+
+:::
+
+::: tip Vite 开发服务器
+一旦应用程序在浏览器中打开，请等待其完成加载，然后返回终端并按下 `p` 键（将停止 Node.js 调试器），然后按下 `q` 键停止开发服务器。
+:::
+
+Node.js 调试器将在根文件夹中生成 `vite-profile-0.cpuprofile` 文件，前往 https://www.speedscope.app/，点击 `BROWSE` 按钮上传 CPU 性能分析文件以检查结果。
+
 ## 其他 {#others}
 
-### Module externalized for browser compatibility {#module-externalized-for-browser-compatibility}
+### 为了浏览器兼容性而模块外部化 {#module-externalized-for-browser-compatibility}
 
 当你在浏览器中使用一个 Node.js 模块时，Vite 会输出以下警告：
 

index.md

@@ -21,6 +21,9 @@ hero:
     - theme: alt
       text: 在 GitHub 上查看
       link: https://github.com/vitejs/vite
+    - theme: brand
+      text: 🎉 ViteConf 23!
+      link: https://viteconf.org/23
 
 features:
   - icon: 💡