这是我参与「第四届青训营 」笔记创作活动的第4天
为什么需要构建工具？
要回答这个问题，首先就得知道前端工程化面临的哪些问题，主要可以从以下几个方面来看：
- 模块化：前端的各种模块化方案，如目前最为流行的ESM，CommonJS，以及比较古老的AMD、UMD等，面对不同的场景，我们可能需要将我们的代码打包成不同的产物，这个时候就需要构建工具来帮忙
- 资源编译：对于目前js的新特性新语法，在部分浏览器上可能尚未支持，而我们的开发中又希望使用它们，这个时候就需要对这些新的高级语法进行编译，通过polyfill转变为旧版本js，如ES5可执行的代码
- 产物质量：随着工程的代码越来越多，体积也就越来越大，而用于生产环境中时，考虑到加载速度等用户体验相关的点，往往需要由打包工具来优化代码，比如对代码进行丑化、压缩从而减小代码体积，优化加载速度
- 开发效率：开发效率主要体现在开发时的热更新体验，随着代码越来越多，涉及到的模块越来越多，如果因为这个导致代码修改后的热更新时间特别长的话，开发体验就比较低下，一款好的构建工具，应当有一个优秀的热更新体验（没错吐槽的就是webpack，热更新龟速）
Vite 是什么？为什么要用 Vite？
Vite 是新一代前端构建工具，它的和新特性有：
- 高性能，开发时的启动速度和热更新速度都非常快，不会随着项目体积增加而变慢
- 简单易用，开发体验极好，不用像webpack一样配置一大堆有的没的
Vite 由两大部分组成：
- No-bundle 开发服务，源文件无需打包
- 生产环境基于 Rollup 的 Bundler
相较于传统的打包工具，如 webpack，Vite 提供了开箱即用的许多功能，等价于 webpack 的：
- webpack
- webpack-dev-server
- css-loader
- style-loader
- less-loader
- sass-loader
- postcss-loader
- file-loader
- MiniCssExtractPlugin
- HTMLWebpackPlugin
- ...
许多常用的功能都可以开箱即用，省去了一大堆繁琐配置的过程
基于原生ESM 的开发服务优势
- 无需打包项目源代码即可运行
- 天然的按需加载
- 可以利用文件级别的浏览器缓存
