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

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 src/about/faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ Vue 3 是性能最强的主流前端框架之一,可以轻松处理大多数 w

## Vue 体积小吗? {#is-vue-lightweight}

当你通过构建工具使用时,Vue 的许多 API 都是可以[“tree-shake”](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking)的。例如,如果你不使用内置的 `<Transition>` 组件,它就不会被包含在最终的生产环境包里。
当你通过构建工具使用时,Vue 的许多 API 都是可以[“tree-shaking”](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking)的。例如,如果你不使用内置的 `<Transition>` 组件,它就不会被包含在最终的生产环境包里。

对于一个 Vue 的最少 API 使用的 hello world 应用来说,配合最小化和 brotli 压缩,其基线大小只有 **16kb** 左右。但实际的应用大小取决于你使用了多少框架的可选特性。在极端情况下,如果一个应用使用了 Vue 提供的每一个特性,那么总的运行时大小大约为 **27kb**。

Expand Down
2 changes: 1 addition & 1 deletion src/api/built-in-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ pageClass: api
# 内置组件 {#built-in-components}

:::info 组件注册和使用
内置组件无需注册便可以直接在模板中使用。它们也支持 tree-shake:仅在使用时才会包含在构建中。
内置组件无需注册便可以直接在模板中使用。它们也支持 tree-shaking:仅在使用时才会包含在构建中。

在[渲染函数](/guide/extras/render-function)中使用它们时,需要显式导入。例如:

Expand Down
4 changes: 2 additions & 2 deletions src/api/general.md
Original file line number Diff line number Diff line change
Expand Up @@ -183,9 +183,9 @@

### webpack Treeshaking 的注意事项 {#note-on-webpack-treeshaking}

因为 `defineComponent()` 是一个函数调用,所以它可能被某些构建工具认为会产生副作用,如 webpack。即使一个组件从未被使用,也有可能不被 tree-shake
因为 `defineComponent()` 是一个函数调用,所以它可能被某些构建工具认为会产生副作用,如 webpack。即使一个组件从未被使用,也有可能不被 tree-shaking

为了告诉 webpack 这个函数调用可以被安全地 tree-shake,我们可以在函数调用之前添加一个 `/*#__PURE__*/` 形式的注释:
为了告诉 webpack 这个函数调用可以被安全地 tree-shaking `/*#__PURE__*/` 形式的注释:

```js
export default /*#__PURE__*/ defineComponent(/* ... */)
Expand Down
2 changes: 1 addition & 1 deletion src/guide/best-practices/performance.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ Vue 在大多数常见场景下性能都是很优秀的,通常不需要手动

- 尽可能地采用构建步骤

- 如果使用的是相对现代的打包工具,许多 Vue 的 API 都是可以被 [tree-shake](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking) 的。举例来说,如果你根本没有使用到内置的 `<Transition>` 组件,它将不会被打包进入最终的产物里。Tree-shaking 也可以移除你源代码中其他未使用到的模块。
- 如果使用的是相对现代的打包工具,许多 Vue 的 API 都是可以被 [tree-shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking) 的。举例来说,如果你根本没有使用到内置的 `<Transition>` 组件,它将不会被打包进入最终的产物里。Tree-shaking 也可以移除你源代码中其他未使用到的模块。

- 当使用了构建步骤时,模板会被预编译,因此我们无须在浏览器中载入 Vue 编译器。这在同样最小化加上 gzip 优化下会相对缩小 **14kb** 并避免运行时的编译开销。

Expand Down
2 changes: 1 addition & 1 deletion src/guide/components/async.md
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ const AsyncComp = defineAsyncComponent({

在 Vue 3.5+ 中,异步组件可以通过提供激活策略来控制何时进行激活。

- Vue 提供了一些内置的激活策略。这些内置策略需要分别导入,以便在未使用时进行 tree-shake
- Vue 提供了一些内置的激活策略。这些内置策略需要分别导入,以便在未使用时进行 tree-shaking

- 该设计有意保持在底层,以确保灵活性。将来可以在此基础上构建编译器语法糖,无论是在核心还是更上层的解决方案 (如 Nuxt) 中实现。

Expand Down