vite | 青训营

89 阅读2分钟

前端工程的痛点

image.png

  • 模块化 到目前为止没有一个统一的标准
  • 资源编译 对于高级语法的编译不支持 跟不上前端的节奏,传统的前端构建工具在项目启动时需要进行完整的编译和打包过程,这可能需要较长的时间,特别是在大型项目中。
  • 产物质量 代码体积、性能以及语法的兼容性
  • 开发效率 在开发过程中,追踪 bug 和实时查看更改的效果对开发者来说非常重要,但有时这些过程可能比较缓慢,导致调试困难。

前端构建工具的意义

前端构建工具的意义在于解决这些痛点并提供更好的开发体验和效率。这些工具能够优化代码和资源,提供自动化的构建、打包和优化过程,加速开发和部署。它们还支持模块化的开发方式,提供调试工具和热重载功能,简化前端开发过程。

image.png

vite

  • 定位 新一代前端构建工具
  • 两大组成部分
    1. No-bundle开发服务,源文件无需打包
    2. 生产环境基于Rollup的Bundler
  • 核心特征
    1. 高性能 dev启动速度和热更新速度非常快
    2. 简单易用,开发者体验好

传统工具的问题与瓶颈

image.png

vite几个特点和优势:

  1. 快速冷启动:Vite 利用浏览器原生的 ES 模块导入功能,将依赖项直接提供给浏览器,避免了传统构建工具中的打包步骤,实现了快速的开发环境冷启动。
  2. 真正的按需编译:Vite 可以根据需要仅编译单个文件或模块,而不必重新编译整个项目。这样可以节省开发过程中的编译时间,加快热重载速度。
  3. 开发时即时编译:Vite 支持在开发过程中对代码进行实时编译和转换,这意味着当你修改代码时,只需要更新修改的部分,而不是整个应用程序。
  4. 高效的构建过程:Vite 利用了现代浏览器的原生特性,例如服务端渲染 (SSR) 和缓存策略,来提高构建的效率和性能。
  5. 高度可配置:Vite 提供了灵活的插件系统和配置选项,使开发者能够根据项目的具体需求进行个性化定制。

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

image.png

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

基于Esbuild的编译性能优化

image.png

内置的web构建能力

image.png