这是我参与「第四届青训营 」笔记创作活动的第12天
主要内容
本课程主要分为五个方面:
- 构建工具的意义
- Vite 概览介绍
- Vite 上手实战
- Vite 整体架构
- Vite 进阶路线
vite介绍
Vite号称是 下一代的前端开发和构建工具 ，目前已经在前端社区里逐步开始流行。它采用了全新的unbundle思想来提升整体的前端开发体验。比起传统的webpack构建，在性能速度上都有了质的提高。
Vite的核心卖点就是“快速”，在整体功能上实现了类似于预配置的webpack加dev server的功能， 用于提高前端项目的整体构建速度。
使用方法
官方脚手架安装、模板安装
//npm
npm init @vitejs/app
// yarn
yarn create @vitejs/app
还可以通过附加的命令行直接指定项目和需要的模板：
//构建一个vite+vue项目
# npm 6.x
npm init @vitejs/app my-vue-app --template vue
# npm 7+, 需要额外的双横线：
npm init @vitejs/app my-vue-app -- --template vue
# yarn
yarn create @vitejs/app my-vue-app --template vue
工作机制
传统打包构建工具，在服务器启动之前，需要从入口文件完整解析构建整个应用。因此，有大量的时间都花在了依赖生成，构建编译上。
vite主要遵循的是使用ESM(Es modules模块)的规范来执行代码，由于现代浏览器基本上都支持了ESM规范，所以在开发阶段并不需要将代码打包编译成es5模块即可在浏览器上运行。我们只需要从入口文件出发， 在遇到对应的
import 语句时，将对应的模块加载到浏览器中就可以了。因此，这种不需要打包的特性，也是vite的速度能够如此快速的原因。
实战部分还没有进行具体实践，有时间亲自感受一下~
