本篇文章偏基础，只讲述一些理论的部分，具体的关于实践手写代码的内容不是很多，同时该部分也可以在面试的时候对面试官的问题做一个简单的回答，可以从中总结出来自己的一个回答的思路。
常见打包工具有什么（webpack、vite lib模式、esbuild、rollup）
webpack:
优点
1.有丰富的插件，可以处理各种类型文件和复杂的构建的需求，比如Style-loader和Css-loader来处理CSS文件
2.适合于大型的项目，可以将代码分割，懒加载等功能
缺点：
需要学习一些系统的知识，配置起来较为复杂
构建速度比较慢
vite lib
优点
vite是基于ES模块导入的特性所以有一定的冷启动和热更新的速度的优势
vite的配置一般来说是比较简单的所以使用vite的话去构建一些中小型的项目不错
缺点
vite的插件和生态不够完整，所以如果进行一定功能的配置还是有一定的局限性
由于vite是基于ES开发的，所以对于一些旧的浏览器可能不太适合用
esbuild：
优点
非常快的构建速度，基于Go语言开发可以进行CPU的并行的处理
可以将语言打包成多种格式比如CJS和ESModule
缺点
功能不太完整比如我们常用过的tree-shaking
Rollup
优点
专门对于JS的打包工具有treeshaking的支持比较良好，能够有效的减少包的体积
可以输出为多种的形式
缺点
插件的生态不够完整，在进行一些高级的功能比如代码分块懒加载这些优势没有别的打包工具优秀
对于TS可以选择专门针对于TS的打包工具-TSUP
1.tsup的配置相对于来说比较简单，无需编写复杂的逻辑和配置文件即可使用
2.会自动的构建.d.ts的文件，无需额外配置TS的申明
3.基于ESbuild和roll up有用多线程处理的同时还可以对打包的代码进行分割，同时还可以将代码打包成为不同的类型CJS，ESmodule等
4.还支持别的插件的扩展
说到打包工具就不得不提一下tree-shaking了
1.Treeshaking就是指在打包工具中消除那些没有使用过的代码
2.功能：
- 减小包的体积：写项目的时候可能会引入很多很多的库还有编写的大量的代码但实际上我们只会使用其中的一部分，所以这些没有使用的代码不会被打包起来。
- 提高性能：较小的包意味着下载和启动的速度相对于来说都比较的快提升用户的体验和开发效率
3.CJS和tree-shaking
treeshaaking主要是针对ES6模块来设计的，ES6的引入是动态结构的特点，所以treeshaking可以分析模块之间的依赖的关系，确定哪些代码是没有使用过的，但是CJS是动态的，只有当使用到的时候才会进行模块的加载，所以不好分析代码之间的依赖关系，因此treeshaking对于CJS的支持并不是很好
ES6的导入是使用import的语法，从刚开始导入到导出的时候就是静态的，这意味着从刚开始代码之间的依赖性就是确定的
4.sideEffects配置项
sideEffects是package.json里面的一个配置选项，用来判断有哪些文件是否有副作用
副作用就是指模块执行的时候除了导出变量和函数还有修改全局的变量和注册监听的事件等的这些事情
{
"name": "my-library",
"version": "1.0.0",
"sideEffects": false
}
//这里设置为false代表整个文件都没有副作用可以放心的treeshaking
{
"name": "my-library",
"version": "1.0.0",
"sideEffects": [
"src/globals.js"
]
}
//这里就是代表这个文件是有副作用的，打包的时候不能对这个文件进行treeshaking即使这个文件没有被用到
如果整个文件都没有副作用那就直接设置为false如果整个文件中有的文件是有副作用的就需要把这个文件列在这个选项中。
