Vite 概览
- Vite 是一个现代化的前端构建工具,专注于提供快速的开发体验。
- 它基于原生 ES 模块系统,利用浏览器的原生模块加载能力,实现快速的冷启动和热模块替换。
- Vite 支持多种前端框架,如 Vue、React 和 Angular 等。
组成
- No-bundle 开发服务,源文件无需打包
- 生产环境基于 Rollup 的 Bundler
核心特征
- 高性能,dev 启动速度和热更新速度非常快
- 简单易用,开发者体验好
构建优化和性能调优
- Vite 提供了许多构建优化和性能调优的功能和配置选项。
- 代码拆分和按需加载:Vite 支持自动的代码拆分和按需加载,以减小应用程序的初始加载大小。
- 缓存策略:Vite 使用了基于文件内容的缓存策略,可以在开发过程中快速重用之前的构建结果。
- 资源压缩:Vite 可以自动压缩和优化静态资源,以提高应用程序的加载速度。
Vite 业界案例
当下问题
两大行业趋势
Vite 优势
基于原生 ESM 的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于 Esbuild 的编译性能优化
- 打包器 Bundler
- 编译器 Teansformer
- 压缩器 Minifier
内置的 Web 构建能力
Vite 开箱即用的功能等价于 webpack、webpack-dev-server、css-loader、less-loader、sass-loader、postcss-loader、file-loader、MiniCssExtractPlugin、HTMLWebpackPlugin……