Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion guide/features.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { someMethod } from 'my-dep'

Vite 通过 HTTP 头来缓存请求得到的依赖,所以如果你想要编辑或调试一个依赖,请按照 [这里](./dep-pre-bundling#浏览器缓存) 的步骤操作。

## 模块热重载 {#hot-module-replacement}
## 模块热替换 {#hot-module-replacement}

Vite 提供了一套原生 ESM 的 [HMR API](./api-hmr)。 具有 HMR 功能的框架可以利用该 API 提供即时、准确的更新,而无需重新加载页面或清除应用程序状态。Vite 内置了 HMR 到 [Vue 单文件组件(SFC)](https://github.com/vitejs/vite/tree/main/packages/plugin-vue) 和 [React Fast Refresh](https://github.com/vitejs/vite/tree/main/packages/plugin-react) 中。也通过 [@prefresh/vite](https://github.com/JoviDeCroock/prefresh/tree/main/packages/vite) 对 Preact 实现了官方集成。

Expand Down
2 changes: 1 addition & 1 deletion guide/why.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ Vite 通过在一开始将应用中的模块区分为 **依赖** 和 **源码**

基于打包器启动时,重建整个包的效率很低。原因显而易见:因为这样更新速度会随着应用体积增长而直线下降。

一些打包器的开发服务器将构建内容存入内存,这样它们只需要在文件更改时使模块图的一部分失活<sup>[[1]](#footnote-1)</sup>,但它也仍需要整个重新构建并重载页面。这样代价很高,并且重新加载页面会消除应用的当前状态,所以打包器支持了动态模块热重载(HMR):允许一个模块 “热替换” 它自己,而不会影响页面其余部分。这大大改进了开发体验 —— 然而,在实践中我们发现,即使采用了 HMR 模式,其热更新速度也会随着应用规模的增长而显著下降。
一些打包器的开发服务器将构建内容存入内存,这样它们只需要在文件更改时使模块图的一部分失活<sup>[[1]](#footnote-1)</sup>,但它也仍需要整个重新构建并重载页面。这样代价很高,并且重新加载页面会消除应用的当前状态,所以打包器支持了动态模块热替换(HMR):允许一个模块 “热替换” 它自己,而不会影响页面其余部分。这大大改进了开发体验 —— 然而,在实践中我们发现,即使采用了 HMR 模式,其热更新速度也会随着应用规模的增长而显著下降。

在 Vite 中,HMR 是在原生 ESM 上执行的。当编辑一个文件时,Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失活<sup>[[1]](#footnote-1)</sup>(大多数时候只是模块本身),使得无论应用大小如何,HMR 始终能保持快速更新。

Expand Down
2 changes: 1 addition & 1 deletion index.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ features:
details: 使用原生 ESM 文件,无需打包!
- icon: ⚡️
title: 轻量快速的热重载
details: 无论应用程序大小如何,都始终极快的模块热重载(HMR)
details: 无论应用程序大小如何,都始终极快的模块热替换(HMR)
- icon: 🛠️
title: 丰富的功能
details: 对 TypeScript、JSX、CSS 等支持开箱即用。
Expand Down