与 webpack 在全过程依赖 babel-loader 处理代码不同的是，vite 在开发过程中使用 esbuild 构建。

esbuild 是一个新的代码构建工具，其构建依赖于 go，并且利用了 paralleljs 高并行的优势，构建速度非常疯狂，当然圈粉的速度也很疯狂（截止 5月30日）。

esbuild 架构极其易于理解，其总共干两件事情，打包依赖项和转换代码，其分块的引入基于浏览器原生提供的 ESModule，并且使用 go 语言编译的天然优势，使得开发和构建的性能拥有显著的提升。由于 esbuild 默认认为开发者使用的浏览器足以处理 stage-4（包括 stage-3 的一些提案 static block field）的语法，因此不会再对其做转换，但最低只会将语法兼容至 es6。这意味着面向 B 端用户或内部用户的项目使用 esbuild 相对技术负担会轻一些，而面向 C 端用户的项目则需要考虑用户浏览器兼容性的问题。

vite 正是看中了 esbuild 的打包速度快的优势动用了它，在开发环境中使用 esbuild 构建，vite 在生产构建过程中使用的是 rollup + esbuild。至于 esbuild 不支持 ie11，vite 通过它的插件系统解决了这件事。

vite 中包含的插件

官方插件共有四个，分别是 @vitejs/plugin-vue 用以处理 vue 文件，将文件中的 template、style 和 script 分析成三个部分；@vitejs/plugin-vue-jsx 用以处理 vue 中的 jsx，与 react 不同的是，vue 中的 jsx 插件，具有 v-modal、v-slots 等 vue 特有的属性，@vitejs/plugin-react-refresh，通过比对更改，为 react 提供更快的局部更新；@vitejs/plugin-legacy 在 esbuild 构建之后再经过一层 @babel/preset-env，用来兼容不支持 ESM 或 ie11 的旧版浏览器。

在社区贡献插件中基本满足了 vite 生态周期中大部分功能。然而 vite 的插件尚不完善。这篇文章总结下 webpack 支持，但 vite 还尚未支持的插件。

webpack 和 vite 的插件对比

结论

vite 毕竟还是一个刚刚起步的打包器，大多数团队对其的支持性尚处于调研阶段。鉴于此，vite 对于自定义的 bundle 配置的支持性还不高，这使得 Webpack 早已支持的 IgnorePlugin、LimitChunkCountPlugin 等成为 vite 插件的一片蓝海。 在社区共建的 awesome-webpack 中还可以见到不少常用 plugin：例如 prerender SPA 用以生成框架无关的静态站点；Fork TS Checker Webpack Plugin 用以在 webpack 启动期间单开进程运行 ts 代码检测器。这些高级插件的开发，将将成为插件开发者的争夺的下一个领域。

GoGoCode 相关链接

开发 vite 插件难免涉及到代码的转换，你可以来看看我们的新项目 GoGoCode

GoGoCode的Github仓库（新项目求star ^_^） github.com/thx/gogocod…

GoGoCode的官网 gogocode.io/

可以来 playground 快速体验一下 play.gogocode.io/

本文作者：冰块