【Vite】1.0 新一代构建工具
官网:https://vitejs.cn/
vue3发布时,同时发布了vite,——新一代构建工具。
优点:
- 开发时效率极高
- 开箱即用,功能完备
- 社区丰富,兼容rollup
- 超高速热重载
- 预设应用和类库打包模式,减少人工配置
- 前端类库无关,和vue无关
esbuild性能对比:
知识内容
本系列篇章主要体现如下内容:
- Vite的使用
- Vite插件开发和实战
- Vite的源码解析
Vite的使用
本系列篇章主要体现如下内容:
- 各种前端框架集成
- css、图片、Wasm之类的第三方资源加载
- Typescript、JSX不同语法集成
- glob import高级功能
- 预编译文件
- 后端集成
Vite插件开发和实战
本系列篇章主要体现如下内容:
- rollup、esbuild学习
- Vite插件API详解
- 官方插件用例详解
Vite的源码解析
本系列篇章主要体现如下内容:
- Vite性能如此出色的原因
- Vite的HMR如何实现
- 服务端选软原理
Vite原理
Vite中,请求发布到Vite Server后,会经过Server App渲染,再经过大段的ModuleGraph模块管理,
再注入各种插件(plugins)功能,最后经过EsBuild保存到缓存中,最终返回给用户。
学习目的
Vite是什么
构建工具的高级封装,最核心的是rollup
Vite创建的目标
- 使用简单
- 快(得益于Vite自身架构和ES6的速度 )
- 便于扩展
类似产品
- Snowpack
- WMR
- @web/dev-server
和传统构建工具的区别(webpack & rollup)
- Vite本身没有自己的编译能力,其编译能力源自于ES6和rollup。
- 完全基于ESM加载方式的开发
webpack | rollup | Vite |
---|---|---|
功能强大、丰富 | 专注于build ES Module;专注于 JavaScript,不考虑平台的能力 | 专注于更好地去开发一个项目 |
更全面 | 更专一 | 更好用 |
Vite是为项目而生的,而不是为构造而生的。减少了很多配置量
减少的工作量
- dev server
- 各类loader
- build命令
发表评论 (审核通过后显示评论):