关于vite的一些笔记

vue3官方文档：https://cn.vitejs.dev/
vite官方文档：https://cn.vuejs.org/
rollup官方文档：https://rollupjs.org/guide/en/#overview

vite与webpack的不同

• webpack的开发模式的启动机制是先打包后加载，所以每次更新会有一次比较长的打包过程
• vite热更新的时候速度非常的快，它是基于浏览器原生ES imports的开发服务器，利用浏览器解析，前端按需编译返回，跳过了打包这一步。而生产环境呢，是使用了rollup进行打包。

看尤大在知乎上的文章有说明：如果说rollup对标的是webpack core的话，vite对标的就是（webpack+针对web的常用配置+webpack-dev-server）。
而双方的使用场景也就不一样了，webpack有足够的复杂图，可以去灵活的根据项目配置，而vite首先就设定了目标场景，预设了web的场景，大部分的web构建需求都可以直接做成默认内置。就可以在浏览器场景下利用远程ESM，实现理论最优的热更新。

基于vite构建的vue项目

npm create vite@lastest

选择vue.png

选择ts.png

非常快速构建成功.png

跳转到项目中npm install后直接启动项目。

项目启动页面.png

可以看到它的目录结构也是非常简单的，大致与我们惯常使用的一致：

image.png

而它的配置就在vite.config.ts文件中。

最后说一下使用感受：使用了vite的开发环境后，就很难回到webpack的环境了，太快了哈哈哈哈，最近支撑的项目还是使用了jquery并且没有其他框架的原始项目，niginx配置，没有本地启动服务的这种，也就没有热更新，然后也变得非常难以忍受。