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}