Vite基础知识总结

概念

Vite(法语单词，快的意思)是一种新型的前端构建工具。
最初是配合Vue3.0一起使用的，后来适配了各种前端项目，目前提供了Vue、React、Preact框架模板。

特点

1. 快速的冷启动
2. 即时的模块热更新
3. 真正的按需编译

与webpack的比较

1. 打包问题：Vue脚手架工具vue-cli使用webpack进行打包，开发时可以启动本地开发服务器，实时预览，因为需要对整个项目文件进行打包，开发服务器启动缓慢。
2. 热更新问题：webpack的热更新会以当前修改的文件为入口重新build打包，所有涉及到的依赖也都会被重新加载一次。
3. vite解决打包问题：vite只启动一台静态页面的服务器，对文件代码不打包，服务器会根据客户端的请求加载不同的模块处理，实现真正的按需加载。
4. vite解决热更新问题：Vite采用立即编译当前修改文件的办法，同时vite还会使用缓存机制(http缓存=>vite内置缓存)，加载更新后的文件内容，所以，vite具有了快速冷启动、按需编译、模块热更新等优良特质。
5. Vite在开发模式下不需要打包可以直接运行，使用的是ES6的模块化加载规则；vue-cli开发模式下必须对项目打包才可以运行
6. vite基于缓存的热更新，vue-cli基于webpack的热更新

vite使用

同常见的开发工具一样，vite提供了用npm或yarn一键生成项目结构的方式

yarn create vite-app <project-name>