You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When enabled, it will hold the first optimized deps results until all static imports are crawled on cold start. This avoids the need for full-page reloads when new dependencies are discovered and they trigger the generation of new common chunks. If all dependencies are found by the scanner plus the explicitly defined ones in `include`, it is better to disable this option to let the browser process more requests in parallel.
If your code relies on types from browser environments such as [DOM](https://github.com/microsoft/TypeScript/blob/main/src/lib/dom.generated.d.ts) and [WebWorker](https://github.com/microsoft/TypeScript/blob/main/src/lib/webworker.generated.d.ts), you can update the [lib](https://www.typescriptlang.org/tsconfig#lib) field in `tsconfig.json`.
-**动态导入 Vite:** 如果你需要继续使用 CJS,你可以使用 `import('vite')` 动态导入 Vite。这要求你的代码必须在一个 `async` 上下文中编写,但是由于 Vite 的 API 大多是异步的,所以应该还是可以管理的。
35
-
=======
36
-
-**Configure ESM as default, opt-in to CJS if needed:** Add `"type": "module"` in the project `package.json`. All `*.js` files are now interpreted as ESM and need to use the ESM syntax. You can rename a file with the `.cjs` extension to keep using CJS instead.
37
-
-**Keep CJS as default, opt-in to ESM if needed:** If the project `package.json` does not have `"type": "module"`, all `*.js` files are interpreted as CJS. You can rename a file with the `.mjs` extension to use ESM instead.
38
-
-**Dynamically import Vite:** If you need to keep using CJS, you can dynamically import Vite using `import('vite')` instead. This requires your code to be written in an `async` context, but should still be manageable as Vite's API is mostly asynchronous.
Note that these changes match the Node.js behaviour, so you can also run the imports in Node.js to test it out. If you prefer to stick with the previous behaviour, you can set `legacy.proxySsrExternalModules` to `true`.
Copy file name to clipboardExpand all lines: guide/performance.md
-4Lines changed: 0 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,11 +10,7 @@
10
10
11
11
有些浏览器插件可能会干涉请求,对于大型应用,特别是在使用浏览器开发工具时,可能会拖慢启动和刷新速度。我们建议在这种情况下,使用 Vite 的开发服务器时,创建一个专门用于开发且不含插件的配置,或者切换到无痕模式。无痕模式的速度也应该比没有插件的常规模式更快。
12
12
13
-
<<<<<<< HEAD
14
13
Vite 开发服务器对预打包的依赖项进行了强缓存,同时对源代码实现快速的 304 响应。如果在浏览器的开发者工具打开的情况下关闭缓存,可能会大幅影响启动速度和全页刷新的时间。因此,在使用 Vite 服务器的时候,请确保没有启用 "禁用缓存" 功能。
15
-
=======
16
-
The Vite dev server does hard caching of pre-bundled dependencies and implements fast 304 responses for source code. Disabling the cache while the Browser Dev Tools are open can have a big impact on startup and full-page reload times. Please check that "Disable Cache" isn't enabled while you work with the Vite server.
@@ -28,11 +20,7 @@ Vite 自其诞生之初(详见:[为什么选 Vite](./why.md))就一直致
28
20
29
21
## 基于 Vite 构建框架 {#building-frameworks-on-top-of-vite}
30
22
31
-
<<<<<<< HEAD
32
23
尽管 Vite 可以直接供用户使用,但它尤其适合作为创建框架的工具。Vite 核心本身不特定于任何框架,但针对每个 UI 框架都提供了完善的插件支持。其 [JS API](./api-javascript.md) 允许应用框架作者利用 Vite 特性为他们的用户提供定制化的体验。Vite 包含了对 [SSR 基础功能](./ssr.md) 的支持,这些功能通常在更高级别的工具中出现,但对于构建现代 Web 框架至关重要。Vite 插件通过提供一种跨框架共享的方式,使整体方案更为完备。此外,当与诸如 [Ruby](https://vite-ruby.netlify.app/) 和 [Laravel](https://laravel.com/docs/10.x/vite) 等 [后端框架](./backend-integration.md) 结合使用时,Vite 也是一个绝佳选择。
33
-
=======
34
-
Although Vite can be used by users directly, it shines as a tool to create frameworks. Vite core is framework agnostic, but there are polished plugins for each UI framework. Its [JS API](./api-javascript.md) allows App Framework authors to use Vite features to create tailored experiences for their users. Vite includes support for [SSR primitives](./ssr.md), usually present in higher-level tools but fundamental to building modern web frameworks. And Vite plugins complete the picture by offering a way to share between frameworks. Vite is also a great fit when paired with [Backend frameworks](./backend-integration.md) like [Ruby](https://vite-ruby.netlify.app/) and [Laravel](https://laravel.com/docs/10.x/vite).
-**动态导入 Vite:** 如果你需要继续使用 CJS,你可以使用 `import('vite')` 动态导入 Vite。这要求你的代码必须在一个 `async` 上下文中编写,但是由于 Vite 的 API 大多是异步的,所以应该还是可以管理的。
24
-
=======
25
-
-**Configure ESM as default, opt-in to CJS if needed:** Add `"type": "module"` in the project `package.json`. All `*.js` files are now interpreted as ESM and need to use the ESM syntax. You can rename a file with the `.cjs` extension to keep using CJS instead.
26
-
-**Keep CJS as default, opt-in to ESM if needed:** If the project `package.json` does not have `"type": "module"`, all `*.js` files are interpreted as CJS. You can rename a file with the `.mjs` extension to use ESM instead.
27
-
-**Dynamically import Vite:** If you need to keep using CJS, you can dynamically import Vite using `import('vite')` instead. This requires your code to be written in an `async` context, but should still be manageable as Vite's API is mostly asynchronous.
Note that postcss config files do not support ESM + TypeScript (`.mts` or `.ts` in `"type": "module"`) yet. If you have postcss configs with `.ts` and added `"type": "module"` to package.json, you'll also need to rename the postcss config to use `.cts`.
The hash key used to invalidate optimized dependencies depends on the package lock contents, the patches applied to dependencies, and the options in the Vite config file that affects the bundling of node modules. This means that Vite will detect when a dependency is overridden using a feature as [npm overrides](https://docs.npmjs.com/cli/v9/configuring-npm/package-json#overrides), and re-bundle your dependencies on the next server start. Vite won't invalidate the dependencies when you use a feature like [npm link](https://docs.npmjs.com/cli/v9/commands/npm-link). In case you link or unlink a dependency, you'll need to force re-optimization on the next server start by using `vite --force`. We recommend using overrides instead, which are supported now by every package manager (see also [pnpm overrides](https://pnpm.io/package_json#pnpmoverrides) and [yarn resolutions](https://yarnpkg.com/configuration/manifest/#resolutions)).
186
-
>>>>>>> cfa53198f6c859029ffa3fd28b08724973a8867b
187
173
188
174
## 性能瓶颈 {#performance-bottlenecks}
189
175
@@ -231,11 +217,7 @@ Vite 无法处理、也不支持仅可在非严格模式(sloppy mode)下运
231
217
232
218
> TypeError: Cannot create property 'foo' on boolean 'false'
If these codes are used inside dependencies, you could use [`patch-package`](https://github.com/ds300/patch-package) (or [`yarn patch`](https://yarnpkg.com/cli/patch) or [`pnpm patch`](https://pnpm.io/cli/patch)) for an escape hatch.
0 commit comments