JS打包工具 Vite

Vite是 JS 新一代的打包的工具,它所解决的问题,是前端打包慢的问题,随着前端应用复杂度越来越大,项目文件越来越多,通常项目中都是使用 Webpack 进行打包,Webpack是个静态的打包工具,每次改动都会打包所有文件,即使使用 HMR,速度也是很慢。

Vite 的推出旨在加速打包,提高前端开发效率,Vite 的核心就是将项目的代码分为两个部分,一部分是类库,另外一部分是应用逻辑代码。对于类库,开发中是不会修改的,这部分代码只要启动了 dev-server,打包一次,就可以保持不动。大部分前端的开发工作还是在写业务代码、写 CSS,由于都是基于框架开发,类库很多也很大,很明显这种分离可以使代码转换速度提高很多。Vite主要采用了以下几种手段来提高性能:

基于 ESM

ESM 是通过 ES2015 进行模块化,最新的浏览都已经支持ESM,所以可以借助浏览器进行解析,从而减少了代码转换的性能开销。

依赖编译加速

通过esbuild对依赖进行打包,esbuild是 go 语言开发的,性能是 JS打包工具的 10到 100 倍。

业务源代码转换

在业务源代码中,包含 CSS、JS 等需要转换的文件,并不是所有文件都要第一次启动时就进行转换,Vite 中只有文件被请求才会转换,可以看下图,代码做了切分,当前页面不需要的文件不转换。

组件更新

在 Vite 中,组件变更时,只会将自己以及临近的依赖进行更新,大多时候只会更新自己,并不会对整个应用进行转换打包。

我们来看一个简单的示例,首先初始化并启动项目:

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm i
npm run dev

进入 dev tools,看到并没有 dist 目录,而是直接访问 main.js。可以体验一下,确实速度很快,首次进入比 vuecli快太多了。

Vite 确实很快,但是目前可能还不能完全替代 webpack,Vite 是不支持老项目的,比如 vue2,现在有很多应用还是 vue2 开发的。

相关推荐
Re.不晚10 分钟前
Java入门15——抽象类
java·开发语言·学习·算法·intellij-idea
老秦包你会12 分钟前
Qt第三课 ----------容器类控件
开发语言·qt
aPurpleBerry13 分钟前
JS常用数组方法 reduce filter find forEach
javascript
凤枭香15 分钟前
Python OpenCV 傅里叶变换
开发语言·图像处理·python·opencv
ULTRA??19 分钟前
C加加中的结构化绑定(解包,折叠展开)
开发语言·c++
远望清一色35 分钟前
基于MATLAB的实现垃圾分类Matlab源码
开发语言·matlab
confiself1 小时前
大模型系列——LLAMA-O1 复刻代码解读
java·开发语言
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x1 小时前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
XiaoLeisj1 小时前
【JavaEE初阶 — 多线程】Thread类的方法&线程生命周期
java·开发语言·java-ee