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配置,没有本地启动服务的这种,也就没有热更新,然后也变得非常难以忍受。
网友评论