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' ]

相关推荐
腾讯TNTWeb前端团队8 分钟前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰4 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪4 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪4 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy4 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom5 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom5 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom5 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom5 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom5 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试