diff --git a/.vitepress/config.ts b/.vitepress/config.ts index 1693d852..ee34efc1 100644 --- 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 index 16ea073b..cb3a5503 100644 --- a/.vitepress/theme/components/HomeSponsors.vue +++ b/.vitepress/theme/components/HomeSponsors.vue @@ -9,8 +9,59 @@ const { data } = useSponsor() +
+ + +
+ + diff --git a/.vitepress/theme/composables/sponsor.ts b/.vitepress/theme/composables/sponsor.ts index 976dbcfb..3251509a 100644 --- 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 = { + 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 index 19a57825..601412be 100644 --- 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 new file mode 100644 index 00000000..756c3579 --- /dev/null +++ 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 index 7b1172d4..6660cd25 100644 --- 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 index 8adf2761..dba5a634 100644 --- 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 index 3b891d11..de927db8 100644 --- 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 index 3cf4e6b9..18a5e1ff 100644 --- 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 index 56db86f5..361d48ee 100644 --- 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 的。要将其补充到 /// ``` -同时，你也可以将 `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 index 232ee2ae..1458b6ca 100644 --- 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 index f774547f..12589a2f 100644 --- 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 new file mode 100644 index 00000000..6c297055 Binary files /dev/null and b/public/og-image-announcing-vite4-3.png differ diff --git a/public/vite4-3-hmr-time.png b/public/vite4-3-hmr-time.png new file mode 100644 index 00000000..bc9bc434 Binary files /dev/null and b/public/vite4-3-hmr-time.png differ diff --git a/public/vite4-3-startup-time.png b/public/vite4-3-startup-time.png new file mode 100644 index 00000000..a0269699 Binary files /dev/null and b/public/vite4-3-startup-time.png differ