vite两个主要部分组成
dev server
:利用浏览器的ESM能力来提供文件,具有丰富的内置功能并具有高效的热更新生产构建
:生产环境利用Rollup来构建代码,提供指令来优化构建过程。
概念:
- 基于浏览器原生的
ESM
的构建工具,它省略
的开发环境的打包过程 - 利用浏览器去解析
imports
,在服务端编译时返回.
- Vite的优势
使用简单
- Vite把能够封装的配置都封装了。底层为Rollup,Rollup的配置比webpack配置项更简单。
- 集成了
dev sever
,相比于webpack需要加webpack-sever再配置。
快
- 启动项目快,编译实时更新
- 不会随着模块的增多而减慢编译速度
便于拓展
- vite兼容大部分Roullup插件,在vite的初期就有一个成熟的社区生态
- 相比于Snowpack的区别
- 在生产构建上
snowpack生产和开发环境都是用Rollup,这样不太利友好,一般开发时用自己的电脑,兼容性版本也可以开发的。而vite在生成环境采用
- 在功能上
- 多页面应用支持
- 库模式
- 自动分隔css代码
- 预优化的异步chunk加载
- 对动态导入自动polyfill
- 官方兼容模式插件打包为现代/传统两种产物,并根据浏览器的版本自动交付正确的版本。
这部分可看官方文档