记录、分享IT相关知识和见闻！
想要了解更多软件相关知识的朋友！
记得右上角添加【关注】，支持一下！
最近有很多同事以及网友咨询我关于前端打包工具的使用问题！
因为说了很多遍，而且都是理论上的交流，所以写这篇文章把最近使用Vite的情况简单汇总说明一下。
就在我这篇文章之前，Vite 的4.2版本已经发布了，据说相比4.0又快了10倍！
关于Vite 的介绍以及详细配置这里就不过多说了，用过Webpack的人使用vite，可以说零成本！ 五分钟就能上手。
文章开头先回答一下大家的几个疑问：
Q: Vite 是否能够用于生产环境？
A： 必须可以，我希望你尽快使用！
Q：能否替代Webpack？
A：新项目，完全没问题，稳得很。
Q：Vite 相对于 Webpack 有什么优势？
A：三个字告诉你： 快、快、快
接下来给大家分享一下我使用这些前端构建工具的一些经历。
rollup 时代
早些时候，我们项目组使用的rollup打包，配置不算复杂，但是几乎都是手动配置！
由于流行度并不是很高，所以大概用了2个项目左右就抛弃了。
Webpack plugin
在rollup之后，我们又将打包工具切换到webpack。
由于项目比较复杂，所以写了大量的插件；
基于这些插件，手写了各种打包命令。
就这样，这个项目越做越大，越难维护；
每次启动时，I7 的电脑大概得5分钟左右，实在太痛苦！
Webpack5
在手写插件难以拓展、难以维护的情况下！
后面去掉了自己手写的插件；
把webpack也升级到了5.0版本！
优化后的项目整体速度提高了30%左右，但是还是非常慢。
Vite 时代
在经历了一段痛苦的阶段之后！
一个非常好的消息是：另一款打包神器 Vite 诞生了！
由于天然的“本土” 化支持！
Vite 受到国内非常高的关注度！
笔者也第一时间关注并使用了它。
为什么可以说 Vite 能够正式使用在生产环境呢？在 Vite 3.0 之前的版本，确实存在各种问题！
尤其是 vite 1.0 ，很多插件都会报错。
想用在生产环境，真的是要很大的勇气！
不过在3.0之后的版本，就改善了许多！
我就是从3.0开始正式在生产环境使用的。
从去年6月开始使用vite，我已经用vite开发了 6个项目了。
在使用vite的时候确实也遇到一些问题；
但是相比webpack遇到的问题，真的算是毛毛雨了。
正式项目 Vite 是否能够替代 Webpack
正式项目如果是新的项目，建议还是优先使用Vite来开发。
如果是旧的Webpack项目，不建议切换至Vite。
首先关于Vite 要知道，它使用的ESModule模式，开发过程中是无需打包的！
旧的Webpack项目，很多的插件库不支持，要想使用vite还得折腾一番。
另外如果你的项目依赖一些非ESModule的老旧的库，也是不建议使用Vite；
如果要用，可以先去调研一下这些库在Vite中是否能够用其他插件来支持一下。
为什么要使用Vite，而弃用Webpack呢？对于使用 Vite 替换 Webpack ，是由于在实际操作中，确实遇到了一些问题：
Webpack 虽然生态非常完善，但是很多插件都需要自己去手动配置进去；
如果使用的库太多，会导致打包异常变慢。
就拿我之前的Webpack项目来讲！
使用了 croco，启动大概需要5分钟左右。
单纯一个croco配置文件，居然300多行。
在jenkins 打包大概需要15分钟左右才能完成。
这里主要的问题是开发体验极差！
用windows 电脑几乎无法工作！
最后团队全部切换成Mac M1电脑，打包维持在1分半左右，才得以解决。
所以为了解决这个“包袱”问题，从去年Vite3.0发布之后，我便将新的项目全部切换到Vite 打包。
切换至 Vite 之后，几乎零配置就把一个项目框架搞完了！
启动速度惊掉下巴；
无论是win 还是 mac， dev模式下基本就是200毫秒内。
build 的速度也就1分钟左右！
经过大半年的使用，目前完整项目本地build时间大概在30秒左右，jenkins 打包 2分钟完成。
再也没有人抱怨开发体验差了！
Vite 实际运用的优势有哪些？还是那句话，简单三个字：快、快、快
1、初始化项目快，一行命令搞定；
2、零配置，上手快；
3、开发启动速度快，编译快；
使用 Vite 快1年了，给人的感觉就是轻松，舒服、快！
如果你是一位前端工程师，还在使用Webpack，那么尽快使用 Vite 吧！
不是因为我有多喜欢它，而是它真的可以给你其他工具给不了的快感！
⛱ 以上就是今天为大家带来的分享！
⛱ 如果文章对你有益；
⛱ 请记得【评论、收藏、转发、点赞】！
⛱ 创作不易，且读且珍惜；
⛱ 喜欢我的文章，记得添加【关注】哦！
⛱ 再次感谢您的阅读。
❀ 长按【点赞】会有惊喜哦！❀
~End~
#创作挑战赛#
,
