Vite 下一代的前端工具链，前端开发与构建工具

天马3798

于 2024-02-06 15:47:59 发布

阅读量2.4k

点赞数 23

分类专栏： Vue 文章标签：前端 Vite 下一代的前端工具链前端开发与构建工具

本文链接：https://blog.csdn.net/u011127019/article/details/136057870

版权

Vue 专栏收录该内容

21 篇文章 5 订阅

订阅专栏

本文介绍了Vite，一种新型的前端构建工具，它利用浏览器原生ESM能力和高性能的热模块替换(HMR)技术，显著提升开发速度，尤其是在服务启动和模块更新方面。Vite通过优化构建流程，提供即时服务启动和闪电般的热更新，是Vue3.4等项目的新选择。

摘要由CSDN通过智能技术生成

一、Vite 简介

官方中文网站：Vite | 下一代的前端工具链

官方定义：

Vite，下一代的前端工具链，为开发提供极速响应。

Vue3.4版本，Vue新版本使用Vite构建、开发、调试、编译。

Vite的优势

极速的服务启动
使用原生 ESM 文件，无需打包!
轻量快速的热重载
无论应用程序大小如何，都始终极快的模块热替换（HMR）
丰富的功能
对 TypeScript、JSX、CSS 等支持开箱即用。
优化的构建
可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建
通用的插件
在开发和构建之间共享 Rollup-superset 插件接口。
完全类型化的API
灵活的 API 和完整的 TypeScript 类型。

二、前端程序员定义

Vite是一种新型的前端构建工具，它能显著改善前端开发体验。

Vite由两个主要部分组成：

dev server：利用浏览器的ESM能力来提供源文件，具有丰富的内置功能并具有高效的HMR
生产构建：生产环境利用Rollup来构建代码，提供指令用来优化构建过程

Vite作为一个基于浏览器原生ESM的构建工具，它省略了开发环境的打包过程，利用浏览器去解析imports，在服务端按需编译返回。同时，在开发环境拥有速度快到惊人的模块热更新，且热更新的速度不会随着模块增多而变慢。因此，使用Vite进行开发，至少会比Webpack快10倍左右。

三、Vite的主要特性
Instant Server Start —— 即时服务启动
Lightning Fast HMR —— 闪电般快速的热更新
Rich Features —— 丰富的功能
Optimized Build —— 经过优化的构建
Universal Plugin Interface —— 通用的Plugin接口
Fully Typed APIs —— 类型齐全的API

四、为什么要使用Vite

开发环境⚡️速度的提升

我们详细对比了开发环境中的Vite和Webpack，发现主要有如下不同：

Webpack	Vite
先打包生成bundle，再启动开发服务器	先启动开发服务器，利用新一代浏览器的ESM能力，无需打包，直接请求所需模块并实时编译
HMR时需要把改动模块及相关依赖全部编译	HMR时只需让浏览器重新请求该模块，同时利用浏览器的缓存（源码模块协商缓存，依赖模块强缓存）来优化请求
内存高效利用	-

因此，针对开发环境中的启动慢问题，Vite开发环境冷启动无需打包，无需分析模块之间的依赖，同时也无需在启动开发服务器前进行编译，启动时还会使用esbuild来进行预构建。而Webpack 启动后会做一堆事情，经历一条很长的编译打包链条，从入口开始需要逐步经历语法解析、依赖收集、代码转译、打包合并、代码优化，最终将高版本的、离散的源码编译打包成低版本、高兼容性的产物代码，这可满满都是 CPU、IO 操作啊，在 Node 运行时下性能必然是有问题。