release: v5.3.5

Ready for Vite v5.3.5 release

Author: waynzh

.vitepress/theme/components/AsideSponsors.vue

@@ -20,14 +20,14 @@ const sponsors = computed(() => {
 <template>
   <a
     class="viteconf"
-    href="https://viteconf.org/23/replay?utm=vite-sidebar"
+    href="https://viteconf.org/?utm=vite-sidebar"
     target="_blank"
   >
     <img width="22" height="22" src="/viteconf.svg" />
     <span>
-      <p class="extra-info">Beyond Fast</p>
-      <p class="heading">ViteConf 2023</p>
-      <p class="extra-info">Watch the replay!</p>
+      <p class="extra-info">Building Together</p>
+      <p class="heading">ViteConf 24 - Oct 3</p>
+      <p class="extra-info">Get your free ticket!</p>
     </span>
   </a>
   <VPDocAsideSponsors v-if="data" :data="sponsors" />

_data/team.js

@@ -100,31 +100,15 @@ export const core = [
     sponsor: 'https://github.com/sponsors/sheremet-va',
   },
   {
-    avatar: 'https://github.com/Shinigami92.png',
-    name: 'Shinigami',
-    title: 'Maintainer',
-    org: 'Faker',
-    orgLink: 'https://fakerjs.dev',
-    desc: 'Passionate TypeScript enthusiast working extensively with Vue SPA and pug.',
-    links: [
-      { icon: 'github', link: 'https://github.com/Shinigami92' },
-      { icon: 'mastodon', link: 'https://elk.zone/mas.to/@Shini92' },
-    ],
-    sponsor: 'https://github.com/sponsors/Shinigami92',
-  },
-  {
-    avatar: 'https://github.com/sodatea.png',
-    name: 'Haoqun Jiang',
-    title: 'Developer',
-    org: 'Vue.js',
-    orgLink: 'https://vuejs.org/',
-    desc: 'Vue/Vite core team member. Full-time open sourcerer.',
+    avatar: 'https://github.com/hi-ogawa.png',
+    name: 'Hiroshi Ogawa',
+    title: 'Team Member of Vitest & Vite',
+    desc: 'Open source enthusiast',
     links: [
-      { icon: 'github', link: 'https://github.com/sodatea' },
-      { icon: 'twitter', link: 'https://twitter.com/haoqunjiang' },
-      { icon: 'mastodon', link: 'https://elk.zone/m.webtoo.ls/@haoqun' },
+      { icon: 'github', link: 'https://github.com/hi-ogawa' },
+      { icon: 'twitter', link: 'https://twitter.com/hiroshi_18181' },
     ],
-    sponsor: 'https://github.com/sponsors/sodatea',
+    sponsor: 'https://github.com/sponsors/hi-ogawa',
   },
 ]
 
@@ -187,7 +171,33 @@ export const emeriti = [
     name: 'Nihal Gonsalves',
     title: '高级软件工程师',
     links: [{ icon: 'github', link: 'https://github.com/nihalgonsalves' }]
-  }
+  },
+  {
+    avatar: 'https://github.com/Shinigami92.png',
+    name: 'Shinigami',
+    title: 'Senior Frontend Engineer',
+    org: 'Faker',
+    orgLink: 'https://fakerjs.dev',
+    desc: 'Passionate TypeScript enthusiast working extensively with Vue SPA.',
+    links: [
+      { icon: 'github', link: 'https://github.com/Shinigami92' },
+      { icon: 'mastodon', link: 'https://elk.zone/mas.to/@Shini92' },
+    ],
+  },
+  {
+    avatar: 'https://github.com/sodatea.png',
+    name: 'Haoqun Jiang',
+    title: 'Developer',
+    org: 'Vue.js',
+    orgLink: 'https://vuejs.org/',
+    desc: 'Vue/Vite team member. Full-time open sourcerer.',
+    links: [
+      { icon: 'github', link: 'https://github.com/sodatea' },
+      { icon: 'twitter', link: 'https://twitter.com/haoqunjiang' },
+      { icon: 'mastodon', link: 'https://elk.zone/m.webtoo.ls/@haoqun' },
+    ],
+    sponsor: 'https://github.com/sponsors/sodatea',
+  },
 ]
 
 export const cnTranslator = [

config/build-options.md

@@ -32,7 +32,7 @@ import 'vite/modulepreload-polyfill'
 
 此 polyfill 可以通过 `{ polyfill: false }` 来禁用。
 
-每个动态导入要预加载的块列表将由 Vite 计算。默认情况下，在载入这些依赖时，会使用一个包含 `base` 的绝对路径。如果 `base` 是相对路径（`''` 或者`'./'`），解析时则会使用 `import.meta.url`，以避免出现依赖于最终部署基路径的绝对路径。
+每个动态导入要预加载的块列表将由 Vite 计算。默认情况下，在载入这些依赖时，会使用一个包含 `base` 的绝对路径。如果 `base` 是相对路径（`''` 或者 `'./'`），解析时则会使用 `import.meta.url`，以避免出现依赖于最终部署基路径的绝对路径。
 
 目前有一个实验性功能支持使用 `resolveDependencies` 函数对依赖项列表及其路径进行细粒度控制。可以在这里 [提供反馈](https://github.com/vitejs/vite/discussions/13841)。它期望接收一个 `ResolveModulePreloadDependenciesFn` 类型的函数:
 

config/index.md

@@ -44,7 +44,15 @@ export default defineConfig({
 })
 ```
 
-Vite 也直接支持 TS 配置文件。你可以在 `vite.config.ts` 中使用 `defineConfig` 工具函数。
+Vite 也直接支持 TypeScript 配置文件。你可以在 `vite.config.ts` 中使用上述的 `defineConfig` 工具函数，或者 `satisfies` 运算符：
+
+```ts
+import type { UserConfig } from 'vite'
+
+export default {
+  // ...
+} satisfies UserConfig
+```
 
 ## 情景配置 {#conditional-config}
 

config/preview-options.md

@@ -46,7 +46,7 @@ export default defineConfig({
 
 ## preview.https {#preview-https}
 
-- **类型：** `boolean | https.ServerOptions`
+- **类型：** `https.ServerOptions`
 - **默认：** [`server.https`](./server-options#server-https)
 
 启用 TLS + HTTP/2。注意，只有在与 [`server.proxy` 选项](./server-options#server-proxy) 同时使用时，才会降级为 TLS。

config/server-options.md

@@ -90,7 +90,7 @@ export default defineConfig({
 
 请注意，如果使用了非相对的 [基础路径 `base`](/config/shared-options.md#base)，则必须在每个 key 值前加上该 `base`。
 
-继承自 [`http-proxy`](https://github.com/http-party/node-http-proxy#options)。完整选项详见 [此处](https://github.com/vitejs/vite/blob/main/packages/vite/src/node/server/middlewares/proxy.ts#L13)。需要注意的是，[与 http-proxy 不同](https://github.com/http-party/node-http-proxy/issues/1669)，`changeOrigin` 选项会同时改变 host 和 origin 头以匹配目标。
+继承自 [`http-proxy`](https://github.com/http-party/node-http-proxy#options)。完整选项详见 [此处](https://github.com/vitejs/vite/blob/main/packages/vite/src/node/server/middlewares/proxy.ts#L13)。
 
 在某些情况下，你可能也想要配置底层的开发服务器。（例如添加自定义的中间件到内部的 [connect](https://github.com/senchalabs/connect) 应用中）为了实现这一点，你需要编写你自己的 [插件](/guide/using-plugins.html) 并使用 [configureServer](/guide/api-plugin.html#configureserver) 函数。
 
@@ -123,9 +123,11 @@ export default defineConfig({
         }
       },
       // 代理 websockets 或 socket.io 写法：ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
+      // 在使用 `rewriteWsOrigin` 时要特别谨慎，因为这可能会让代理服务器暴露在 CSRF 攻击之下
       '/socket.io': {
         target: 'ws://localhost:5174',
         ws: true,
+        rewriteWsOrigin: true,
       },
     },
   },
@@ -326,6 +328,16 @@ export default defineConfig({
 
 用于限制 Vite 开发服务器提供敏感文件的黑名单。这会比 [`server.fs.allow`](#server-fs-allow) 选项的优先级更高。同时还支持 [picomatch 模式](https://github.com/micromatch/picomatch#globbing-features)。
 
+## server.fs.cachedChecks
+
+- **类型：** `boolean`
+- **默认：** `false`
+- **实验性**
+
+该选项可以缓存访问过的目录的文件名，从而避免重复的文件系统操作。尤其在 Windows 系统中，这个选项可能会带来性能提升。但由于存在一些边缘情况，比如在一个已缓存的文件夹中写入文件并立即导入它，所以这个选项默认是关闭的。
+
+Caches filenames of accessed directories to avoid repeated filesystem operations. Particularly in Windows, this could result in a performance boost. It is disabled by default due to edge cases when writing a file in a cached folder and immediately importing it.
+
 ## server.origin {#server-origin}
 
 - **类型：** `string`

config/shared-options.md

@@ -225,7 +225,7 @@ Vite 有一个“允许的情景”列表，并且会匹配列表中第一个情
 
 指定传递给 CSS 预处理器的选项。文件扩展名用作选项的键。每个预处理器支持的选项可以在它们各自的文档中找到：
 
-- `sass`/`scss` - [选项](https://sass-lang.com/documentation/js-api/interfaces/LegacyStringOptions)。
+- `sass`/`scss` - 上层选项 `api: "legacy" | "modern" | "modern-compiler"`（默认值是 `"legacy"`）可以让你选择使用哪种 sass API。为获得最佳的性能，建议你使用 `sass-embedded` 包并设置 `api: "modern-compiler"`。[选项（legacy）](https://sass-lang.com/documentation/js-api/interfaces/LegacyStringOptions)，[选项（modern）](https://sass-lang.com/documentation/js-api/interfaces/stringoptions/)。
 - `less` - [选项](https://lesscss.org/usage/#less-options)。
 - `styl`/`stylus` - 仅支持 [`define`](https://stylus-lang.com/docs/js.html#define-name-node)，可以作为对象传递。
 
@@ -243,6 +243,12 @@ export default defineConfig({
           $specialColor: new stylus.nodes.RGBA(51, 197, 255, 1),
         },
       },
+      scss: {
+        api: 'modern-compiler', // 或 "modern"，"legacy"
+        importers: [
+          // ...
+        ],
+      },
     },
   },
 })

guide/api-plugin.md

@@ -398,6 +398,10 @@ Vite 插件也可以提供钩子来服务于特定的 Vite 目标。这些钩子
   }
   ```
 
+  ::: warning 注意
+  如果你正在使用一个对入口文件有特殊处理方式的框架（比如 [SvelteKit](https://github.com/sveltejs/kit/discussions/8269#discussioncomment-4509145)），那么这个钩子就不会被触发。
+  :::
+
 ### `handleHotUpdate` {#handlehotupdate}
 
 - **类型：** `(ctx: HmrContext) => Array<ModuleNode> | void | Promise<Array<ModuleNode> | void>`

guide/build.md

@@ -13,7 +13,7 @@
 
 你也可以通过 [`build.target` 配置项](/config/build-options.md#build-target) 指定构建目标，最低支持 `es2015`。
 
-请注意，默认情况下 Vite 只处理语法转译，且 **不包含任何 polyfill**。你可以前往 [Polyfill.io](https://polyfill.io/) 查看，这是一个基于用户浏览器 User-Agent 字符串自动生成 polyfill 包的服务。
+请注意，默认情况下 Vite 只处理语法转译，且 **不包含任何 polyfill**。你可以访问 https://cdnjs.cloudflare.com/polyfill/ ，这个网站可以根据用户的浏览器 UserAgent 字符串自动生成 polyfill 包。
 
 传统浏览器可以通过插件 [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) 来支持，它将自动生成传统版本的 chunk 及与其相对应 ES 语言特性方面的 polyfill。兼容版的 chunk 只会在不支持原生 ESM 的浏览器中进行按需加载。
 

guide/comparisons.md

@@ -2,9 +2,9 @@
 
 ## WMR {#wmr}
 
-Preact 团队的 [WMR](https://github.com/preactjs/wmr) 提供了类似的特性集，而 Vite 2.0 对 Rollup 插件接口的支持正是受到了它的启发。
+Preact 团队的 [WMR](https://github.com/preactjs/wmr) 旨在提供类似的功能集，Vite 的通用 Rollup 插件 API（用于开发和构建）就是受此启发而设计的。
 
-WMR 主要是为了 [Preact](https://preactjs.com/) 项目而设计，并为其提供了集成度更高的功能，比如预渲染。就使用范围而言，它更加贴合于 Preact 框架，与 Preact 本身一样强调紧凑的大小。如果你正在使用 Preact，那么 WMR 可能会提供更好的体验。
+目前，WMR 已经停止维护。Preact 团队现在建议搭配使用 Vite 和 [@preactjs/preset-vite](https://github.com/preactjs/preset-vite)。
 
 ## @web/dev-server {#web-dev-server}
 

guide/features.md

@@ -256,13 +256,13 @@ document.getElementById('foo').className = applyColor
 话虽如此，但 Vite 也同时提供了对 `.scss`, `.sass`, `.less`, `.styl` 和 `.stylus` 文件的内置支持。没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖：
 
 ```bash
-# .scss and .sass
-npm add -D sass
+# .scss 和 .sass
+npm add -D sass-embedded # 或 sass
 
 # .less
 npm add -D less
 
-# .styl and .stylus
+# .styl 和 .stylus
 npm add -D stylus
 ```
 

guide/index.md

@@ -71,20 +71,27 @@ $ bun create vite
 
 你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:
 
-```bash
-# npm 7+, 需要额外加 --:
-npm create vite@latest my-vue-app -- --template vue
+::: code-group
+
+```bash [NPM]
+# npm 7+，需要添加额外的 --：
+$ npm create vite@latest my-vue-app -- --template vue
+```
 
-# yarn
-yarn create vite my-vue-app --template vue
+```bash [Yarn]
+$ yarn create vite my-vue-app --template vue
+```
 
-# pnpm
-pnpm create vite my-vue-app --template vue
+```bash [PNPM]
+$ pnpm create vite my-vue-app --template vue
+```
 
-# bun
-bun create vite my-vue-app --template vue
+```bash [Bun]
+$ bun create vite my-vue-app --template vue
 ```
 
+:::
+
 查看 [create-vite](https://github.com/vitejs/vite/tree/main/packages/create-vite) 以获取每个模板的更多细节：`vanilla`，`vanilla-ts`, `vue`, `vue-ts`，`react`，`react-ts`，`react-swc`，`react-swc-ts`，`preact`，`preact-ts`，`lit`，`lit-ts`，`svelte`，`svelte-ts`，`solid`，`solid-ts`，`qwik`，`qwik-ts`。
 
 你可以使用 `.` 作为项目名称，在当前目录中创建项目脚手架。
@@ -155,7 +162,8 @@ Vite 也支持多个 `.html` 作入口点的 [多页面应用模式](./build#mul
 
 #### 指定替代根目录 {#specifying-alternative-root}
 
-`vite` 以当前工作目录作为根目录启动开发服务器。你也可以通过 `vite serve some/sub/dir` 来指定一个替代的根目录。注意 Vite 同时会解析项目根目录下的 [配置文件（即 `vite.config.js`）](/config/#configuring-vite)，因此如果根目录被改变了，你需要将配置文件移动到新的根目录下。
+执行 `vite` 命令会以当前工作目录作为根目录启动开发服务器。你也可以通过 `vite serve some/sub/dir` 来指定一个不同的根目录。
+需要注意的是，Vite 也会在项目的根目录中寻找 [它的配置文件（即 `vite.config.js`）](/config/#configuring-vite)，所以如果更改了根目录，你需要将配置文件一起移动过去。
 
 ## 命令行界面 {#command-line-interface}
 

guide/migration.md

@@ -187,7 +187,7 @@ Vite 5 使用 esbuild 0.19 并移除了 esbuild 0.18 的兼容层，这改变了
 - `resolvePackageData`: 与上述相同，向上爬取包目录以获取根 `package.json`。或者使用社区的 [`vitefu`](https://github.com/svitejs/vitefu) 库。
 
 ```js
-import { resolve } from 'import-meta-env'
+import { resolve } from 'import-meta-resolve'
 import { findDepPkgJsonPath } from 'vitefu'
 import fs from 'node:fs'
 

index.md

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

package.json

@@ -8,19 +8,19 @@
 	"private": true,
 	"license": "CC BY-NC-SA 4.0",
 	"devDependencies": {
-    "@shikijs/vitepress-twoslash": "^1.7.0",
+		"@shikijs/vitepress-twoslash": "^1.12.0",
 		"@types/express": "^4.17.21",
 		"feed": "^4.2.2",
-		"vitepress": "1.2.3",
-		"vue": "^3.4.29",
+		"vitepress": "1.3.1",
+		"vue": "^3.4.34",
 		"@types/node": "^20.9.2",
 		"chalk": "^4.1.2",
 		"gray-matter": "^4.0.3",
 		"lodash": "^4.17.21",
 		"vite": "^5.1.6",
 		"yorkie": "^2.0.0"
 	},
-	"packageManager": "pnpm@8.9.0",
+	"packageManager": "pnpm@9.6.0",
 	"scripts": {
 		"dev": "vitepress dev .",
 		"build": "vitepress build .",