尝鲜 vite,和 webpack 比还缺哪些好用插件?

·  阅读 3189

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

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

image.png

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

image.png

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 的插件对比

image.png

结论

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/

阿里妈妈出的新工具,给批量修改项目代码减轻了痛苦
「GoGoCode 实战」一口气学会 30 个 AST 代码替换小诀窍
0成本上手AST,用GoGoCode解决Vue2迁移Vue3难题
GoGoCode协助清理代码中的「垃圾」

本文作者:冰块

分类:
前端
收藏成功!
已添加到「」, 点击更改