vite为什么速度快

原因

vite快的原因是因为 vite在开发环境中是使用的 esbuild,esbuild 是 go 写的,go = 编译型语言、多线程,nodejs = 解释型语言、单线程,并且 vite 使用了原生 esm 导入的,所以快一点,当然,这也只是开发环节,build 的时候vite使用的是 rollup ,回归js,打包速度并没什么提升

  1. esbuild 的优势
    • esbuild 使用 Go 语言编写,Go 语言天生支持多线程(goroutines)和并发,这使得 esbuild 在编译 JavaScript 和 CSS 时能够充分利用多核 CPU 的性能。
    • esbuild 专注于构建时的快速性能,采用了简单而高效的算法,避免了像 Babel 这样的工具在转换代码时可能产生的额外开销。
  1. Vite 的开发环境
    • Vite 在开发环境中使用原生 ES 模块(ESM)进行热模块替换(HMR),这避免了传统的打包步骤,从而大大加快了启动速度和模块更新速度。
    • Vite 利用了浏览器的原生 ESM 支持,将项目中的模块按需提供给浏览器,而不是将所有代码打包成一个或多个 bundle。
  1. Vite 的构建过程
    • 虽然 Vite 在开发环境中使用了 esbuild,但在生产构建时,它默认使用 Rollup 进行打包。Rollup 是一个专注于打包 ES6 模块的打包器,它本身并不比 webpack 或其他打包器快很多,但在配合 Vite 的优化策略(如预构建、依赖预处理等)时,可以提供不错的构建性能。
    • Vite 的构建性能并不是其主打优势,其主要优势在于开发环境的快速反馈和原生 ESM 的支持。然而,通过一些配置和优化,Vite 的生产构建也可以达到相当的性能水平。
  1. Node.js 的单线程与多线程
    • Node.js 本身是单线程的,但它是基于事件循环和非阻塞 I/O 设计的,这使得它能够在高并发环境下表现出色。此外,Node.js 可以通过 Worker Threads 实现多线程编程,但需要注意的是,这与 Go 语言的 goroutine 在设计和使用上有所不同。
    • 尽管 Node.js 在某些情况下可能不如 Go 语言快,但它仍然是一个强大且灵活的平台,特别适合构建 Web 应用程序和工具。

总之,Vite 的快速开发体验主要归功于其使用原生 ESM 和 esbuild 的优势,而在生产构建方面,虽然它默认使用 Rollup,但通过适当的配置和优化也可以实现不错的性能。

补充:

vite主要优化配置

  1. 基于ES模块的快速热更新:Vite 利用浏览器对 ES 模块的支持,能够在开发环境下实现近乎即时的模块热替换(HMR),无需打包整个项目,仅重新加载变更的模块,极大提高了开发速度。
  2. 按需编译:在开发模式下,Vite 对每个请求的模块进行即时编译,而不是像传统构建工具那样预先打包所有资源。这种方式减少了初次启动和更改后重新加载的时间。
  3. 预构建依赖:Vite 会在启动时预编译项目依赖到一个高效的格式,通常是 ES 模块格式,这样在开发过程中这些依赖就可以被浏览器直接加载,进一步加快加载速度。
  4. HTTP2 和缓存策略:Vite 利用 HTTP2 多路复用的特性,将多个模块请求合并到少量的连接中,减少网络延迟。同时,通过ETag和强缓存策略确保静态资源能够被有效缓存,提升加载速度。
  5. Rollup 打包:在生产构建时,Vite 使用 Rollup 进行代码打包,Rollup 以其高效的树摇(Tree Shaking)和代码分割能力著称,帮助减小最终输出的文件大小。
  6. 懒加载和代码分割:Vite 支持自动代码分割,允许将应用程序的不同部分拆分成单独的 chunks,仅在需要时加载,这对于大型应用来说可以显著提升初始加载速度。
  7. Vue 3 的原生支持:Vite 对 Vue 3 提供了原生支持,利用Vue 3的Composition API和其它性能优化特性,进一步提升Vue应用的运行效率。
  8. Dev Server 配置优化:Vite 的 dev server 配置简单且强大,提供了很多开箱即用的优化选项,比如对静态资源的处理、代理设置等,便于开发者根据需要进行微调。

事件循环和非阻塞 I/O

事件循环(Event Loop)和非阻塞 I/O(Non-blocking I/O)是现代异步编程模型中的两个核心概念,特别是在处理高并发或I/O密集型任务时。以下是它们的基本解释和关系:

事件循环(Event Loop)

事件循环是一个程序结构,它等待事件的发生(如用户输入、网络请求完成等),然后响应这些事件。在单线程环境中,事件循环特别有用,因为它允许我们在不阻塞主线程的情况下处理多个事件。

在事件循环中,通常会有一个事件队列(Event Queue),用于存储待处理的事件。当事件发生时,它们会被添加到事件队列中。事件循环会不断地从队列中取出事件,并执行相应的回调函数来处理这些事件。

非阻塞 I/O(Non-blocking I/O)

非阻塞 I/O 是一种I/O操作模式,它允许程序在等待I/O操作完成时不阻塞当前线程。与传统的阻塞I/O相比,非阻塞I/O可以提高程序的并发性和响应性。

在非阻塞I/O中,当程序发起一个I/O请求(如读取文件、发送网络请求等)时,如果I/O操作不能立即完成(例如,数据还没有准备好),程序不会阻塞等待,而是立即返回并继续执行其他任务。当I/O操作完成时,程序会收到一个通知(通常是通过回调函数或事件的方式),然后可以处理I/O操作的结果。

事件循环和非阻塞 I/O 的关系

事件循环和非阻塞I/O经常一起使用,以实现高效的异步编程。在基于事件循环的异步编程模型中,通常会使用非阻塞I/O来执行I/O操作。这样,当I/O操作不能立即完成时,程序可以继续执行其他任务,而不会阻塞等待I/O操作的完成。当I/O操作完成时,相应的回调函数会被添加到事件队列中,然后由事件循环来处理这些回调函数。

这种模型使得程序能够充分利用CPU和I/O资源,提高整体的并发性和响应性。它特别适合于处理大量并发请求或I/O密集型任务的情况。

示例(以Node.js为例)

Node.js 是一个使用事件循环和非阻塞I/O的JavaScript运行时环境。在Node.js中,你可以使用异步函数和Promise来处理异步操作,这些操作通常基于非阻塞I/O。当异步操作完成时,相应的回调函数或Promise的resolve函数会被调用,并添加到事件队列中等待事件循环的处理。这使得Node.js能够高效地处理大量并发请求,并成为构建高性能Web服务器和API的流行选择。

  • 26
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

向画

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值