「Vue.js 设计与实现」笔记

Tree-Shaking（摇树优化）

什么是 Tree-Shaking 呢？在前端领域，这个概念因 rollup.js 而普及。简单地说，Tree-Shaking 指的就是消除那些永远不会被执行的代码，也就是排除 dead code，现在无论是 rollup.js 还是 webpack，都支持 Tree-Shaking。

ESM 和 Common JS 的区别

• ESM： export + import

• Common JS： moudle.export +require

想要使用 Tree-Shaking 的话，只能使用 ESM，并且应该局部引入：

1
2
3
4
5
6
7
8

// Import everything (not tree-shaking)
import lodash from 'lodash';

// Import named export (can be tree-shaking)
import { debounce } from 'lodash';

// Import the item directly (can be tree-shaking)
import debounce from 'lodash/lib/debounce';

优化 Ref 对象的输出结果

在 Vue.js 3 的源码中，你可以搜索到名为 initCustomFormatter 的函数，该
函数就是用来在开发环境下初始化自定义 formatter 的。

打开 DevTools 的设置，然后勾选“Console”→“Enable
custom formatters”选项，如果将语言设置为中文则是“控制台”→“启动自定义格式设置工具”选项。