docs(cn): update with main stream

release v4.3.0
vitejs · Apr 24, 2023 · 5e47c03 · 5e47c03 · vercel · Apr 24, 2023
2 parents 291a25b + b3e88da
commit 5e47c03
Show file tree

Hide file tree

Showing 15 changed files with 229 additions and 20 deletions.
diff --git a/.vitepress/config.ts b/.vitepress/config.ts
@@ -41,10 +41,6 @@ export default defineConfig({
     pt: { label: 'Português', link: 'https://pt.vitejs.dev' },
   },
 
-  vue: {
-    reactivityTransform: true,
-  },
-
   themeConfig: {
     logo: '/logo.svg',
 

diff --git a/.vitepress/theme/components/HomeSponsors.vue b/.vitepress/theme/components/HomeSponsors.vue
@@ -9,8 +9,59 @@ const { data } = useSponsor()
   <VPHomeSponsors
     v-if="data"
     message="Vite is free and open source, made possible by wonderful sponsors."
-    action-text="Become a sponsor"
-    action-link="https://github.com/sponsors/yyx990803"
     :data="data"
   />
+  <div class="action">
+    <a
+      class="sponsor"
+      href="https://github.com/sponsors/vitejs"
+      target="_blank"
+      rel="noreferrer"
+    >
+      Sponsor Vite
+    </a>
+    <a
+      class="sponsor"
+      href="https://github.com/sponsors/yyx990803"
+      target="_blank"
+      rel="noreferrer"
+    >
+      Sponsor Evan You
+    </a>
+  </div>
 </template>
+
+<style scoped>
+.action {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  padding-top: 4rem;
+}
+
+.sponsor {
+  /* .VPButton */
+  display: inline-block;
+  border: 1px solid transparent;
+  text-align: center;
+  font-weight: 600;
+  white-space: nowrap;
+  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
+  /* .VPButton.medium */
+  border-radius: 20px;
+  padding: 0 20px;
+  line-height: 38px;
+  font-size: 14px;
+  /* .VPButton.sponsor */
+  border-color: var(--vp-button-sponsor-border);
+  color: var(--vp-button-sponsor-text);
+  background-color: var(--vp-button-sponsor-bg);
+}
+
+.sponsor:hover {
+  /* .VPButton.sponsor:hover */
+  border-color: var(--vp-button-sponsor-hover-border);
+  color: var(--vp-button-sponsor-hover-text);
+  background-color: var(--vp-button-sponsor-hover-bg);
+}
+</style>
diff --git a/.vitepress/theme/composables/sponsor.ts b/.vitepress/theme/composables/sponsor.ts
@@ -21,6 +21,11 @@ const data = ref()
 const dataHost = 'https://sponsors.vuejs.org'
 const dataUrl = `${dataHost}/vite.json`
 
+// no sponsors yet :(
+const viteSponsors: Pick<Sponsors, 'gold'> = {
+  gold: [],
+}
+
 export function useSponsor() {
   onMounted(async () => {
     if (data.value) {
@@ -48,7 +53,7 @@ function mapSponsors(sponsors: Sponsors) {
     {
       tier: 'Gold Sponsors',
       size: 'medium',
-      items: mapImgPath(sponsors['gold']),
+      items: viteSponsors['gold'].concat(mapImgPath(sponsors['gold'])),
     },
   ]
 }

diff --git a/_data/team.js b/_data/team.js
@@ -120,7 +120,23 @@ export const core = [
     name: 'Dominik G.',
     title: 'Resident CI Expert',
     desc: 'Team Member of Vite and Svelte',
-    links: [{ icon: 'github', link: 'https://github.com/dominikg' }],
+    links: [
+      { icon: 'github', link: 'https://github.com/dominikg' },
+      { icon: 'mastodon', link: 'https://elk.zone/m.webtoo.ls/@dominikg' },
+    ],
+    sponsor: 'https://github.com/sponsors/dominikg',
+  },
+  {
+    avatar: 'https://github.com/sheremet-va.png',
+    name: 'Vladimir',
+    title: 'Core team member of Vitest & Vite',
+    desc: 'An open source fullstack developer',
+    links: [
+      { icon: 'github', link: 'https://github.com/sheremet-va' },
+      { icon: 'mastodon', link: 'https://elk.zone/m.webtoo.ls/@sheremet_va' },
+      { icon: 'twitter', link: 'https://twitter.com/sheremet_va' },
+    ],
+    sponsor: 'https://github.com/sponsors/sheremet-va',
   },
 ]
 

diff --git a/blog/announcing-vite4-3.md b/blog/announcing-vite4-3.md
@@ -0,0 +1,86 @@
+---
+sidebar: false
+head:
+  - - meta
+    - property: og:type
+      content: website
+  - - meta
+    - property: og:title
+      content: Announcing Vite 4.3
+  - - meta
+    - property: og:image
+      content: https://vitejs.dev/og-image-announcing-vite4-3.png
+  - - meta
+    - property: og:url
+      content: https://vitejs.dev/blog/announcing-vite4-3
+  - - meta
+    - property: og:description
+      content: Vite 4.3 Release Announcement
+  - - meta
+    - name: twitter:card
+      content: summary_large_image
+---
+
+# Vite 4.3 is out!
+
+_April 20, 2023_
+
+![Vite 4.3 Announcement Cover Image](/og-image-announcing-vite4-3.png)
+
+Quick links:
+
+- Docs: [English](/), [简体中文](https://cn.vitejs.dev/), [日本語](https://ja.vitejs.dev/), [Español](https://es.vitejs.dev/), [Português](https://pt.vitejs.dev/)
+- [Vite 4.3 Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#430-2023-04-20)
+
+## Performance Improvements
+
+In this minor, we focused on improving the dev server performance. The resolve logic got streamlined, improving hot paths and implementing smarter caching for finding `package.json`, TS config files, and resolved URL in general.
+
+You can read a detailed walkthrough of the performance work done in this blog post by one of Vite Contributors: [How we made Vite 4.3 faaaaster 🚀](https://sun0day.github.io/blog/vite/why-vite4_3-is-faster.html).
+
+This sprint resulted in speed improvements across the board compared to Vite 4.2.
+
+These are the performance improvements as measured by [sapphi-red/performance-compare](https://github.com/sapphi-red/performance-compare), which tests an app with 1000 React Components cold and warm dev server startup time as well as HMR times for a root and a leaf component:
+
+| **Vite (babel)**   |  Vite 4.2 | Vite 4.3 | Improvement |
+| :----------------- | --------: | -------: | ----------: |
+| **dev cold start** | 17249.0ms | 5132.4ms |      -70.2% |
+| **dev warm start** |  6027.8ms | 4536.1ms |      -24.7% |
+| **Root HMR**       |    46.8ms |   26.7ms |      -42.9% |
+| **Leaf HMR**       |    27.0ms |   12.9ms |      -52.2% |
+
+| **Vite (swc)**     |  Vite 4.2 | Vite 4.3 | Improvement |
+| :----------------- | --------: | -------: | ----------: |
+| **dev cold start** | 13552.5ms | 3201.0ms |      -76.4% |
+| **dev warm start** |  4625.5ms | 2834.4ms |      -38.7% |
+| **Root HMR**       |    30.5ms |   24.0ms |      -21.3% |
+| **Leaf HMR**       |    16.9ms |   10.0ms |      -40.8% |
+
+![Vite 4.3 vs 4.2 startup time comparison](/vite4-3-startup-time.png)
+
+![Vite 4.3 vs 4.2 HMR time comparison](/vite4-3-hmr-time.png)
+
+You can read more information about the benchmark [here](https://gist.github.com/sapphi-red/25be97327ee64a3c1dce793444afdf6e). Specs and Versions for this performance run:
+
+- CPU: Ryzen 9 5900X, Memory: DDR4-3600 32GB, SSD: WD Blue SN550 NVME SSD
+- Windows 10 Pro 21H2 19044.2846
+- Node.js 18.16.0
+- Vite and React Plugin versions
+  - Vite 4.2 (babel): Vite 4.2.1 + plugin-react 3.1.0
+  - Vite 4.3 (babel): Vite 4.3.0 + plugin-react 4.0.0-beta.1
+  - Vite 4.2 (swc): Vite 4.2.1 + plugin-react-swc 3.2.0
+  - Vite 4.3 (swc): Vite 4.3.0 + plugin-react-swc 3.3.0
+
+Early adopters have also reported seeing 1.5x-2x dev startup time improvement on real apps while testing the Vite 4.3 beta. We'd love to know the results for your apps.
+
+## Profiling
+
+We'll continue to work on Vite's performance. We're working on an official [Benchmark tool](https://github.com/vitejs/vite-benchmark) for Vite that let us get performance metrics for each Pull Request.
+
+And [vite-plugin-inspect](https://github.com/antfu/vite-plugin-inspect) now has more performance-related features to help you identify which plugins or middlewares are the bottleneck for your applications.
+
+Using `vite --profile` (and then pressing `p`) once the page loads will save a CPU profile of the dev server startup. You can open them in an app as [speedscope](https://www.speedscope.app/) to identify performance issues. And you can share your findings with the Vite Team in a [Discussion](https://github.com/vitejs/vite/discussions) or in [Vite's Discord](https://chat.vitejs.dev).
+
+## Next Steps
+
+We decided to do a single Vite Major this year aligning with the [EOL of Node.js 16](https://endoflife.date/nodejs) in September, dropping support for both Node.js 14 and 16 in it. If you would like to get involved, we started a [Vite 5 Discussion](https://github.com/vitejs/vite/discussions/12466) to gather early feedback.
diff --git a/config/server-options.md b/config/server-options.md
@@ -327,7 +327,7 @@ export default defineConfig({
 - **类型：** `false | (sourcePath: string, sourcemapPath: string) => boolean`
 - **默认：** `(sourcePath) => sourcePath.includes('node_modules')`
 
-是否忽略服务器 sourcemap 中的源文件，用于填充 [`x_google_ignoreList` source map 扩展](https://developer.chrome.com/blog/devtools-better-angular-debugging/#the-x_google_ignorelist-source-map-extension)。
+是否忽略服务器 sourcemap 中的源文件，用于填充 [`x_google_ignoreList` source map 扩展](https://developer.chrome.com/articles/x-google-ignore-list/)。
 
 对开发服务器来说 `server.sourcemapIgnoreList` 等价于 [`build.rollupOptions.output.sourcemapIgnoreList`](https://rollupjs.org/configuration-options/#output-sourcemapignorelist)。两个配置选项之间的区别在于，rollup 函数使用相对路径调用 `sourcePath`，而 `server.sourcemapIgnoreList` 使用绝对路径调用。在开发过程中，大多数模块的映射和源文件位于同一个文件夹中，因此 `sourcePath` 的相对路径就是文件名本身。在这些情况下，使用绝对路径更加方便。
 

diff --git a/config/shared-options.md b/config/shared-options.md
@@ -111,7 +111,7 @@ const obj = {
 更高级的自定义解析方法可以通过 [插件](/guide/api-plugin) 实现。
 
 ::: warning 在 SSR 中使用
-如果你已经为 [SSR 外部化的依赖](/guide/ssr.md#ssr-externals) 配置了别名，你可能想要为真实的 `node_modules` 包配别名. [Yarn](https://classic.yarnpkg.com/en/docs/cli/add/#toc-yarn-add-alias) 和 [pnpm](https://pnpm.js.org/en/aliases) 都支持通过 `npm:` 前缀配置别名。
+如果你已经为 [SSR 外部化的依赖](/guide/ssr.md#ssr-externals) 配置了别名，你可能想要为真实的 `node_modules` 包配别名。[Yarn](https://classic.yarnpkg.com/en/docs/cli/add/#toc-yarn-add-alias) 和 [pnpm](https://pnpm.io/aliases/) 都支持通过 `npm:` 前缀配置别名。
 :::
 
 ## resolve.dedupe {#resolve-dedupe}
@@ -232,7 +232,7 @@ interface CSSModulesOptions {
 - `less` - [选项](https://lesscss.org/usage/#less-options)。
 - `styl`/`stylus` - 仅支持 [`define`](https://stylus-lang.com/docs/js.html#define-name-node)，可以作为对象传递。
 
-所有预处理器选项还支持 `additionalData` 选项，可以用于为每个样式内容注入额外代码。
+所有预处理器选项还支持 `additionalData` 选项，可以用于为每个样式内容注入额外代码。请注意，如果注入的是实际的样式而不仅仅是变量时，那么这些样式将会在最终的打包产物中重复出现。
 
 示例：
 

diff --git a/guide/api-javascript.md b/guide/api-javascript.md
@@ -196,6 +196,46 @@ import { preview } from 'vite'
 })()
 ```
 
+## `PreviewServer`
+
+```ts
+interface PreviewServer extends PreviewServerForHook {
+  resolvedUrls: ResolvedServerUrls
+}
+```
+
+## `PreviewServerForHook`
+
+```ts
+interface PreviewServerForHook {
+  /**
+   * 解析后的 vite 配置对象
+   */
+  config: ResolvedConfig
+  /**
+   * 一个 connect 应用实例。
+   * - 可用作将自定义中间件附加到预览服务器上。
+   * - 还可用作自定义 HTTP 服务器的处理函数
+   *   或作为任何 connect 风格的 Node.js 框架的中间件
+   *
+   * https://github.com/senchalabs/connect#use-middleware
+   */
+  middlewares: Connect.Server
+  /**
+   * 原生 Node http 服务器实例
+   */
+  httpServer: http.Server
+  /**
+   * Vite 在 CLI 中输出的解析后的 URL
+   */
+  resolvedUrls: ResolvedServerUrls | null
+  /**
+   * 打印服务器 URL
+   */
+  printUrls(): void
+}
+```
+
 ## `resolveConfig` {#resolveconfig}
 
 **类型校验：**

diff --git a/guide/api-plugin.md b/guide/api-plugin.md
@@ -309,10 +309,11 @@ Vite 插件也可以提供钩子来服务于特定的 Vite 目标。这些钩子
 
 ### `configurePreviewServer` {#configurepreviewserver}
 
-- **类型：** `(server: { middlewares: Connect.Server, httpServer: http.Server }) => (() => void) | void | Promise<(() => void) | void>`
+- **类型：** `(server: PreviewServerForHook) => (() => void) | void | Promise<(() => void) | void>`
 - **种类：** `async`, `sequential`
+- **参见：** [PreviewServerForHook](./api-javascript#previewserverforhook)
 
-  与 [`configureServer`](/guide/api-plugin.html#configureserver) 相同但是作为预览服务器。它提供了一个 [connect](https://github.com/senchalabs/connect) 服务器实例及其底层的 [http server](https://nodejs.org/api/http.html)。与 `configureServer` 类似，`configurePreviewServer` 这个钩子也是在其他中间件安装前被调用的。如果你想要在其他中间件 **之后** 安装一个插件，你可以从 `configurePreviewServer` 返回一个函数，它将会在内部中间件被安装之后再调用：
+  与 [`configureServer`](/guide/api-plugin.html#configureserver) 相同，但用于预览服务器。`configurePreviewServer` 这个钩子与 `configureServer` 类似，也是在其他中间件安装前被调用。如果你想要在其他中间件 **之后** 安装一个插件，你可以从 `configurePreviewServer` 返回一个函数，它将会在内部中间件被安装之后再调用：
 
   ```js
   const myPlugin = () => ({

diff --git a/guide/features.md b/guide/features.md
@@ -74,7 +74,7 @@ export type { T }
 
 如果你正在使用一个严重依赖 class fields 的库，请注意该库对此选项的预期设置。
 
-大多数库都希望 `"useDefineForClassFields": true`，如 [MobX](https://mobx.js.org/installation.html#use-spec-compliant-transpilation-for-class-properties)，[Vue Class Components 8.x](https://github.com/vuejs/vue-class-component/issues/465) 等。
+大多数库都希望 `"useDefineForClassFields": true`，如 [MobX](https://mobx.js.org/installation.html#use-spec-compliant-transpilation-for-class-properties)。
 
 但是有几个库还没有兼容这个新的默认值，其中包括 [`lit-element`](https://github.com/lit/lit-element/issues/1030)。如果遇到这种情况，请将 `useDefineForClassFields` 设置为 `false`。
 
@@ -96,7 +96,7 @@ Vite 默认的类型定义是写给它的 Node.js API 的。要将其补充到
 /// <reference types="vite/client" />
 ```
 
-同时，你也可以将 `vite/client` 添加到 `tsconfig` 中的 `compilerOptions.types` 下：
+或者，你也可以将 `vite/client` 添加到 `tsconfig.json` 中的 `compilerOptions.types` 下：
 
 ```json
 {
@@ -255,6 +255,7 @@ import otherStyles from './bar.css?inline' // 样式不会注入页面
 ::: tip 注意
 自 Vite 4 起，CSS 文件的默认导入和按名导入（例如 `import style from './foo.css'`）将弃用。请使用 `?inline` 参数代替。
 :::
+
 ## 静态资源处理 {#static-assets}
 
 导入一个静态资源会返回解析后的 URL：
@@ -350,7 +351,7 @@ const modules = {
 `import.meta.glob` 都支持以字符串形式导入文件，类似于 [以字符串形式导入资源](https://vitejs.dev/guide/assets.html#importing-asset-as-string)。在这里，我们使用了 [Import Reflection](https://github.com/tc39/proposal-import-reflection) 语法对导入进行断言：
 
 ```js
-const modules = import.meta.glob('./dir/*.js', { as: 'raw' })
+const modules = import.meta.glob('./dir/*.js', { as: 'raw', eager: true })
 ```
 
 上面的代码会被转换为下面这样：
@@ -460,7 +461,7 @@ const modules = {
 }
 ```
 
-### Glob 导入注意事项
+### Glob 导入注意事项 {#glob-import-caveats}
 
 请注意：
 

diff --git a/guide/ssr.md b/guide/ssr.md
@@ -73,7 +73,8 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url))
 async function createServer() {
   const app = express()
 
-  // 以中间件模式创建 Vite 应用，这将禁用 Vite 自身的 HTML 服务逻辑
+  // 以中间件模式创建 Vite 应用，并将 appType 配置为 'custom'
+  // 这将禁用 Vite 自身的 HTML 服务逻辑
   // 并让上级服务器接管控制
   const vite = await createViteServer({
     server: { middlewareMode: true },
@@ -210,10 +211,12 @@ const html = await vueServerRenderer.renderToString(app, ctx)
 
 当运行 SSR 时依赖会由 Vite 的 SSR 转换模块系统作外部化。这会同时提速开发与构建。
 
-例如，如果依赖项需要通过 Vite 的管道进行转换，因为在这些依赖在管道中使用 Vite 特性时是不转翻译的，则可以将它们添加到 [`ssr.noExternal`](../config/ssr-options.md#ssrnoexternal) 中。
+如果依赖需要被 Vite 的管道转换，例如因为其中使用了未经过转译的 Vite 特性，那么它们可以被添加到 [`ssr.noExternal`](../config/ssr-options.md#ssr-noexternal) 中。
+
+对于采用链接的依赖，它们将默认不会被外部化，这是为了能使其利用 Vite HMR 的优势。如果你不需要这一功效，例如，想要把这些依赖当成非链接情况来测试，你可以将其添加到 [`ssr.external`](../config/ssr-options.md#ssr-external)。
 
 :::warning 使用别名
-如果你为某个包配置了一个别名，为了能使 SSR 外部化依赖功能正常工作，你可能想要使用的别名应该指的是实际的 `node_modules` 中的包。[Yarn](https://classic.yarnpkg.com/en/docs/cli/add/#toc-yarn-add-alias) 和 [pnpm](https://pnpm.js.org/en/aliases) 都支持通过 `npm:` 前缀来设置别名。
+如果你为某个包配置了一个别名，为了能使 SSR 外部化依赖功能正常工作，你可能想要使用的别名应该指的是实际的 `node_modules` 中的包。[Yarn](https://classic.yarnpkg.com/en/docs/cli/add/#toc-yarn-add-alias) 和 [pnpm](https://pnpm.io/aliases/) 都支持通过 `npm:` 前缀来设置别名。
 :::
 
 ## SSR 专有插件逻辑 {#ssr-specific-plugin-logic}

diff --git a/guide/troubleshooting.md b/guide/troubleshooting.md
@@ -121,6 +121,12 @@ import './Foo.js' // 应该为 './foo.js'
 
 你需要通过 `http` 协议访问该文件。最简单的办法就是使用 `npx vite preview`。
 
+## 优化依赖 {#optimize-dependencies}
+
+### 链接本地包时过期预构建依赖项 {#outdated-pre-bundled-deps-when-linking-to-a-local-package}
+
+在 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)）。
+
 ## 其他 {#others}
 
 ### Module externalized for browser compatibility {#module-externalized-for-browser-compatibility}
@@ -144,3 +150,7 @@ Vite 无法处理、也不支持仅可在非严格模式（sloppy mode）下运
 > TypeError: Cannot create property 'foo' on boolean 'false'
 
 如果这些代码是在依赖中被使用的，你应该使用 [`patch-package`](https://github.com/ds300/patch-package)（或者 [`yarn patch`](https://yarnpkg.com/cli/patch)、[`pnpm patch`](https://pnpm.io/cli/patch) 工具）来做短期补丁处理。
+
+### 浏览器扩展程序 {#browser-extensions}
+
+一些浏览器扩展程序（例如 ad-blockers 广告拦截器），可能会阻止 Vite 客户端向 Vite 开发服务器发送请求。在这种情况下，你可能会看到一个空白屏且没有错误日志。如果遇到这类问题，请尝试禁用扩展程序。
diff --git a/public/og-image-announcing-vite4-3.png b/public/og-image-announcing-vite4-3.png
diff --git a/public/vite4-3-hmr-time.png b/public/vite4-3-hmr-time.png
diff --git a/public/vite4-3-startup-time.png b/public/vite4-3-startup-time.png