持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情
框架设计概览
第2章 框架设计的核心要素
本章中vue团队阐述了他们的框架设计目标。
提升用户开发体验
这一点上我一直觉得vue做的很好，有着稳定的@vue/cli,基本上0配置。vue这个框架本身上手也不难，可以说对用户来说很友好了，但是vue3仍有一些改进，应该算是彩蛋吧。
打开F12,选择右上角齿轮图标
然后找到这个选项打开
在 vue3中，新增了
initCustomFormatter函数，用来在开发环境下自定义formatter,这样可以让你在打印ref，reactive显示的更加直观。
控制代码的体积
vue3能够减少体积主要得益于ESM+rollup，通过rollup的treeShaking，去掉很多的无用的代码，这一点其实也值得我们学习。 例如我们打印日志的时候,这样既能在开发开发中显示错误信息，也能减少打包后的体积。当然具体还要看rollup或者webpack.
if(process.env.NODE_ENV==='development'){
console.log('some error')
}
框架要做到良好的Tree-Shaking
我把Tree-Shaking称之为摇树优化，一棵树的叶子，有些还绿着，有些却已经枯黄了，我们是使劲摇树，把黄叶子摇下来。代码层面的Tree-Shaking就是把不用的代码剔除出去。 例如这样
// a.js
export const a = 1
export const b = 2
//main.js
import {a} from './a'
我们可以发现,main.js中只使用了一个a,b并未使用，如果你这通过rollup打包，就会是这样
const a = 1
这就是摇树优化。但是摇树优化需要能够静态的分析你得依赖，哪些变量被export，哪些变量被import，只有ESM才能做到这点。 下一篇文章我再仔细讲一下Tree-Shaking
