开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第20天，点击查看活动详情
既然连vue官方都推荐vite，那我们就简单的使用一下vite。
什么是vite
首先我们先大概了解一下vite,vite是鱿鱼须新出的一个打包器，也就是类似于webpack。我总结一下这两者的不同
- vite是简单而轻快的，webpack是复杂而笨重的
我认为vite的简单主要体现在配置简单。webpack的配置则十分繁琐，说句不好听的，天下苦webpack配置久矣。 vite中，主要的配置就是plugin，而大部分plugin也就是传入一个对象而已，很多时候我们都可以直接使用默认配置。
webpack的配置主要体现在概念多，比如loader，plugin，而且可配置的项也非常多，不同项不同值组合起来可能效果就会千差万别，因此导致了配置难度大，配置很复杂。
轻快自然指的是HMR的速度，在这方面vite还是吊打webpack的。
- vite是ESM的，webpack是UMD+CJS+ESM
vite的底层是依赖于ESM的，甚至可以夸张的说，vite的接收端和输出端最好全都是ESM，因此在某些老设备上可能有兼容性问题，但是如果你面向的不是老设备，那么ESM完全没有问题。
它的兼容性如下图
webpack则基本支持所有的模块化，因此它可以用在所有js环境中的，很多node项目中也有webpack的身影。
- vite是面向未来的尝试，webpack则是兼容并蓄的
为什么说是面向未来，因为vite甩下了许多历史的包袱，同时引入了esbuild，esbuild是golang编写的一个编译esm模块，这代表鱿鱼须对于前端工程化的一些思考，js不再是第一选择，效率才是第一选择。
而webpack有许多历史性的包袱，它无法能做到这般彻底的转型，但是并不是说webpack就没有优点，比如webpack5新出的模块联邦，我还没机会使用，但我觉得这是一场很好的尝试。