为什么需要构建工具？
- 依赖手工，比如有50个JS文件...操作，过程繁琐
- 当代码文件之间有依赖的时候，就得严格按依赖顺序书写
- 开发与生产环境一致,难以接入TS 或JS新特性
- 比较难接入Less、Sass等工具
- JS、图片、CSS资源管理模型不一致
Webpack
概念
Webpack 是一个静态模块打包器工具，通过对项目中的 JavaScript、CSS、图片等文件进行分析，生成对应的静态资源，并且可以通过一些插件和加载器来实现各种功能。Webpack 的主要特点是支持各种复杂的构建场景，例如代码分割、按需加载等，但也因此导致配置复杂，打包速度较慢。
webpack的核心概念
- entry：入口，指示webpack从哪里开始打包
- output：输出，指示打包后的文件输出到哪里去，怎么命名等
- loader：加载器，webpack本身只能加载js、json等资源
- plugins：插件
- mode：模式
- 开发模式：development
- 生产模式：production
Vite
概念
Vite 则是一种基于浏览器原生 ES 模块解析的构建工具，它通过在服务器端搭建开发环境，在浏览器中使用原生 ES 模块的方式实现了快速的开发体验。Vite 的主要特点是支持快速的开发反应和打包速度快，但是在复杂的构建场景下可能会受到限制。
优势
基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
基于Esbuild的编译性能优化
性能极高
- 可以利用文件级的浏览器缓存
生产环境Tree Shaking
优化原理：
- 基于ESM的import/export语句依赖关系，与运行时状态无关。
(比如CommonJS中的require部分可能是运行时计算的结果，无法确定是否需要删掉） - 在构建阶段将未使用到的代码进行删除。
在vite当中无需配置，默认开启。
关键技术
vite整体架构
依赖预构建
依赖预构建是指在启动时会对项目中的依赖进行分析并将其预构建成浏览器可识别的形式。这样在浏览器中加载组件时就无需再进行模块的编译和构建，大大提高了应用程序的运行速度。
单文件编译
用Esbuild编译TS/JSX
优势：
- 编译速度提升10-100x
局限性：
- ESbuild不支持类型检查😭
- ESbuild只能把语法降到ES6，不支持降级到ES5😭
插件机制
开发阶段 -> 模拟Rollup插件机制
生产环境 -> 直接使用Rollup
