vite 知识笔记 | 青训营笔记

95 阅读1分钟

这是我参与「第四届青训营 」笔记创作活动的第4天

hei, what'up guys.

我是jokereven.

前端工程的痛点:

image.png

下一代的前端工具链

为开发提供极速响应

这是vite官网给出的描述, 作为一个前端开发者相信大家或多或少都接触过一些打包工具例如webpack等, 相对于vite来说, 这些工具都太慢了.

为什么选 Vite, 官方给出了很好的解释, Vite 将会使用 esbuild 预构建依赖。esbuild 使用 Go 编写,并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。

vite 这类打包工具就是为前端提供更丝滑的体验.

image.png

效果:

image.png

esbuild:

image.png

vite体验:

image.png

不得不说这东西是真的快, 差不读2s, 用create-react-app的化要起码15s, 快就完了.

整体架构:

image.png

image.png

image.png

关于vite有太多的问题.

image.png

vite 还有许许多多的插件, vite 不仅仅只有这些, 现在也有越来越多的团队于开发者开始使用vite, 相信在将来vite的使用者也会越来越多.

没有用过vite, 以及听过没用过的兄弟们快去试试.

vite 对于不同的框架有不同的模板.

image.png

over, place.