持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情

框架设计概览

第2章 框架设计的核心要素

框架要做到良好的Tree-Shaking

说的Tree-Shaking，就要提到一个东西叫副作用，就是side-effect. 副作用其实就是当函数调用时是否对外部的变量有影响，如果有副作用，这个函数就不能被Tree-Shaking.

let a = 1
function foo(){
    a++
}

这样就出现了副作用。这时候我们看另一个例子。

//a.js
export function foo(obj){
 obj && obj.foo
}
//main.js
import {foo} './a.js'
/*#__PURE__*#/foo()

按照之前的理论，打包之后应该存在foo()这个函数，因为这个函数被引用了，但是如果你用rollup试一下，你会发现打包出来是空.密码就在于/*#__PURE__*#/这个注释，告诉了打包器这是一个没有副作用的函数，因此打包器发现这个函数可以tree-shaking，于是就删掉了.

但其实，我们可以简单的分辨一个函数有没有副作用：那就是看他的作用域

foo()//顶级调用
function bar(){
    foo() //函数内调用
}

对于顶级调用来说，它是有可能产生副作用了，你需要看它代码。但是对于函数内调用，如果这个bar函数都没有被调用，那么foo一定是可以被优化的。

这一块的内容其实应该结合具体的打包器来看，但是我并不建议大家深入了解，比较不是所有人都要设计框架。

框架应该输出怎么的构建产物

这一张其实就讲了一个点，框架应该产出对于所有环境使用的包。对于浏览器，我们可以产生IIFE、UMD，ESM，其实现在大部分浏览器也已经原生支持ESM了。对于webpack,vite等这些打包器，生成一个-bundler包。别忘了，vue还支持SSR，因此需要再生成以后CJS的包，这也是我们在vue打包后看见如此多文件的原因。