什么是Vite
Vite是尤随Vue3正式版一并发布的工具,起初是和Vue绑定的,后续发展成了框架无关的一个工具
Vite其实是构建工具的高阶封装,内部是其他的构建工具,最多的是rollup,rollup一般用于个人项目的三方库
Vite的目标
使用简单(底层是rollup,兼容rollup插件,较少配置)
集成了DevServer,不用额外配置DevServer
快(开发时体验让人感觉是没有编译过程的,修改之后热更新体验是非常快的)
便于扩展(rollup的插件基本上在vite可以直接使用)
Vite生产构建使用rollup, Snowpack默认构建输出是未打包的
Vite和传统构建工具的区别
Vite
- High Level Api
其他都是low Level Api, 关注太细节了 - 不包含自己的编译能力,不参与编译,底层是Rollup和ESbuild
- 完全基于ESM加载方式进行开发
vs webpack
webpack 功能更强大,rollup是一个更加专一的工具
webpack构建产物有许多自身特性,辅助函数;rollup不会,它产出的是符合规范的代码,初衷是为工具类库服务,而不是前端项目
Vite的目的是工程,Vite更加上层, 刚方便开发项目
vite在DEV环境使用了EsBuild,启动的时候只做了一些预编译,初次访问只需要编译首页需要加载的内容,相当于只有一条路径,而webpack需要递归遍历所有路径输出bundle
使用Vite学习成本没有webpack那么高,它从一开始设计就是为了面向项目开发。vite为项目而生,不为构建而生
vite减少了工作量
- 内置dev server
- 不需要配置各类loader,vite直接内置了,提前预设好了
- 内置了build命令 vite build, vite dev, vite serve
vs 脚手架 vue-cli,create-react-app
你要修改后两者,你还是要修改webapck配置
cra需要eject弹射
vue-cli需的configWebpack和chainWebpack
Vite有自身的插件系统,尽量做到了简单
webpack更全面,rollup更专一,vite更High-level更好用