vite是一种构建工具,旨在为现代Web项目提供更快,更精简的开发体验.
它包括两个主要部分:
- 开发服务器,它在本机ESM上提供了丰富的功能增强,例如,极快的Hot Module Replacement(HMR)。
- 构建命令,它将代码使用Rollup进行构建。
随着vue3的推出,Vite也随之成名,起初是一个针对Vue3的打包编译工具,目前2.x版本发布面向了任何前端框架, 不局限于Vue,在Vite的README中也提到了在某些想法上参考了Snowpack。
什么是snowpack?
Snowpack是一种闪电般快速的前端构建工具,专为现代Web设计。 它是开发工作流程较重,较复杂的打包工具(如Webpack或Parcel)的替代方案。Snowpack利用JavaScript的本机模块系统(称为ESM)来避免不必要的工作并保持流畅的开发体验。
Snowpack的理念是减少或避免整个bundle的打包,每次保存单个文件时,传统的JavaScript构建工具(例如Webpack和Parcel)都需要重新构建和重新打包应用程序的整个bundle。重新打包时增加了在保存更改和看到更改反映在浏览器之间的时间间隔。在开发过程中 , Snowpack为你的应用程序提供unbundled ****server 。 每个文件只需要构建一次,就可以永久缓存。文件更改时,Snowpack会重新构建该单个文件。在重新构建每次变更时没有任何的时间浪费,只需要在浏览器中进行HMR更新。
snowpack和vite不同点:
- Snowpack的build默认是不打包的,好处是可以灵活选择Rollup、Webpack等打包工具,坏处就是不同打包工具带来了不同的体验,当前ESbuild作为生产环境打包尚不稳定,Rollup也没有官方支持Snowpack,不同的工具会产生不同的配置文件;
- Vite支持多page打包;
- Vite支持Library Mode;
- Vite支持CSS代码拆分,Snowpack默认是CSS in JS;
- Vite优化了异步代码加载;
- Vite支持动态引入 polyfill;
- Vite官方的 legacy mode plugin,可以同时生成 ESM 和 NO ESM;
- First Class Vue Support。
迁移Vite2遇到的问题:
1.不支持省略.vue后缀,因为此路由机制与编译处理强关联;
2.不支持.vue后缀文件内写jsx,若写jsx,需要改文件后缀为.jsx;
3.当dependencies首次未被写入缓存时,补充写入会报错,需要二次重启;