1、框架设计命令式与声明式比较
（1）命令式
特点：关注执行的过程，我们用jquery举例：
$('#app').text('hellow world')
$('#app').on('click', function() { console.log('hellow world') })
// 亦或原生js方式
const div = document.getElementById('app')
div.innerText = 'hellow world'
div.addEventListener('click', () => console.log('hellow world'))
（2）声明式
特点：只注重结果，不关心过程，拿vue的模板文件来说
<div @click="() => console.log('hellow world')">hellow world</div>
相信接触前端比较早的小伙伴，对于这两种方式的视图层框架都有比较深刻的认识，两种方式对比如下：
- 声明式的代码其实就是命令式代码的封装体
- 声明式的代码性能可能并不优于命令式的代码
- 声明式代码相较命令式代码更加容易维护
（3）三种视图层处理方案对比
注意上面标记的“可能”，讨论性能，我们需要注意比较“页面大小”、“变更部分”都是有关系，如果我们页面变革内容只是一小块，那么如果通过innerHTML方式的命令式编程性能就会捉襟见肘了；
2、框架中的Tree-Shaking
Tree-Shaking是指消除那些永远不会被执行的代码，tree-shaking必须满足一个条件，模块必须是ESM，因为ESM是静态导出导入，有利于分析模块是否被引用；
对于产生副作用的函数，我们也可以通过/*__PURE__*/方式注释，这样可以告诉rollup 或者 webpack让他们放心的tree-shaking
