它主要由两部分组成#xff1a;

打包你的代码并且它是预配置的可输出用于生产环境的高度优化过的静态资源。

Vite

一句话总结使用vite构建项目启动的速度要比使用webpack构建更快。

现实问题

开发的工具就会开始遇到性能瓶颈通常需要很长时间甚至是几分钟才能启动开发服务器即使使用模块热替换HMR文件修改后的效果也需要几秒钟才能在浏览器中反映出来。

如此循环往复迟钝的反馈会极大地影响开发者的开发效率和体验感。

Vite

JavaScript。

一些较大的依赖例如有上百个模块的组件库处理的代价也很高。

依赖也通常会存在多种模块化格式例如

ESM

组件时常会被编辑。

同时并不是所有的源码都需要同时被加载例如基于路由拆分的代码模块。

Esbuild

esbuild总共提供了四个函数transform、build、buildSync、Service。

有兴趣的可以移步官方文档了解。

Why

并不是什么高效的语言在执行过程中要先编译后执行还是单线程并且不能利用多核

cpu

优势尽可能让他们饱和运行(比如说esbuild可以使得浏览器新增一个进程进程中增加多个线程)高效使用内存Scratch

ESM

方式提供源码。

这实际上是让浏览器接管了打包程序的部分工作Vite

只需要在浏览器请求源码时进行转换并按需提供源码。

根据情景动态导入代码即只在当前屏幕上实际使用时才会被处理。

ESM

提供了更原生以及更动态的模块加载方案最重要的就是它是浏览器原生支持的也就是说我们可以直接在浏览器中去执行import动态引入我们需要的模块而不是把所有模块打包在一起。

(深入Vite再谈ESM的高阶特性)

ECMA

当我们在使用模块开发时其实就是在构建一张模块依赖关系图当模块加载时就会从入口文件开始最终生成完整的模块实例图。

构建:

将模块记录转换为一个模块实例为所有的模块分配内存空间依照导出、导入语句把模块指向对应的内存地址。

运行运行代码将内存空间填充

从上面实例化的过程可以看出ESM使用实时绑定的模式导出和导入的模块都指向相同的内存地址也就是值引用。

而CJS采用的是值拷贝即所有导出值都是拷贝值。

基于打包器启动时重建整个包的效率很低。

原因显而易见因为这样更新速度会随着应用体积增长而直线下降。

一些打包器的开发服务器将构建内容存入内存这样它们只需要在文件更改时使模块图的一部分失活但它也仍需要整个重新构建并重载页面。

这样代价很高并且重新加载页面会消除应用的当前状态所以打包器支持了动态模块热替换HMR

允许一个模块

边界之间的链失活大多数时候只是模块本身使得无论应用大小如何HMR

Vite

头来加速整个页面的重新加载再次让浏览器为我们做更多事情源码模块的请求会根据

304

的神速是否愿意再忍受像曾经那样使用打包器开发就要打上一个大大的问号了。

在线试用

的构建因此它与本地开发几乎无差别同时无需在你的机器上安装任何东西。

你可以浏览

vite.new/{template}

create-vite、vite、create-vue之间的区别

create-vite

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。

例如要构建一个

Vite

以获取每个模板的更多细节vanillavanilla-tsvuevue-tsreactreact-tsreact-swcreact-swc-tspreactpreact-tslitlit-tssveltesvelte-tssolidsolid-tsqwikqwik-ts。

社区模板