Vite 知识体系 | 青训营

83 阅读1分钟

Vite 概览

  • Vite 是一个现代化的前端构建工具,专注于提供快速的开发体验。
  • 它基于原生 ES 模块系统,利用浏览器的原生模块加载能力,实现快速的冷启动和热模块替换。
  • Vite 支持多种前端框架,如 Vue、React 和 Angular 等。

组成

  • No-bundle 开发服务,源文件无需打包
  • 生产环境基于 Rollup 的 Bundler

核心特征

  • 高性能,dev 启动速度和热更新速度非常快
  • 简单易用,开发者体验好

构建优化和性能调优

  • Vite 提供了许多构建优化和性能调优的功能和配置选项。
  • 代码拆分和按需加载:Vite 支持自动的代码拆分和按需加载,以减小应用程序的初始加载大小。
  • 缓存策略:Vite 使用了基于文件内容的缓存策略,可以在开发过程中快速重用之前的构建结果。
  • 资源压缩:Vite 可以自动压缩和优化静态资源,以提高应用程序的加载速度。

Vite 业界案例

image.png

当下问题

image.png

两大行业趋势

image.png

Vite 优势

基于原生 ESM 的开发服务优势

  • 无需打包项目源代码
  • 天然的按需加载
  • 可以利用文件级的浏览器缓存

基于 Esbuild 的编译性能优化

  • 打包器 Bundler
  • 编译器 Teansformer
  • 压缩器 Minifier

内置的 Web 构建能力

Vite 开箱即用的功能等价于 webpack、webpack-dev-server、css-loader、less-loader、sass-loader、postcss-loader、file-loader、MiniCssExtractPlugin、HTMLWebpackPlugin……

Vite 插件开发

image.png