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

一、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 运行时下性能必然是有问题。

更多:

Vue3富文本组件UEditor ,[email protected]

基于Vue的移动端UI框架整理

Vue2报错opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ]

相关推荐
Freedom风间4 小时前
前端优秀编码技巧
前端·javascript·代码规范
萌萌哒草头将军5 小时前
🚀🚀🚀 Openapi:全栈开发神器,0代码写后端!
前端·javascript·next.js
萌萌哒草头将军5 小时前
🚀🚀🚀 Prisma 爱之初体验:一款非常棒的 ORM 工具库
前端·javascript·orm
拉不动的猪5 小时前
SDK与API简单对比
前端·javascript·面试
runnerdancer5 小时前
微信小程序蓝牙通信开发之分包传输通信协议开发
前端
山海上的风6 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui
电商api接口开发6 小时前
ASP.NET MVC 入门指南二
前端·c#·html·mvc
亭台烟雨中6 小时前
【前端记事】关于electron的入门使用
前端·javascript·electron