• 学习vite的核心原理


    Vite主要由两个部分组成

    1. 开发服务器
    • 基于原生ES模块(ESM)提供开发环境支持。
    • 提供了丰富的内建功能,如速度快到惊人的模块热更新(HMR)。这意味着开发者在修改代码时,可以实时地看到更新效果,而无需重新加载整个页面。
    • 利用现代浏览器的原生ES模块支持,将开发过程中的构建步骤推迟到了运行时,从而大大减少了启动时间。
    1. 构建指令
    • 使用Rollup作为打包工具,可以生成更小、更优化的代码块,确保生产环境的应用加载速度快。
    • Rollup是一个基于ES6的模块打包工具,其打包的文件小且干净,执行效率更高,更专注于JS打包,并支持Tree-shaking(通过工具“摇”掉JS文件中用不到的代码,是一个性能优化的范畴)。
    • 构建指令是预配置的,开箱即用,可以输出用于生产环境的高度优化过的静态资源。

    Vite有哪些主要特性:

    • 冷启动优化:Vite采用原生ESM作为模块系统的实现,避免了传统打包工具在启动时的长时间编译过程,从而实现了极速的冷启动。
    • 热模块替换(HMR):Vite内置了热模块替换功能,可以在不刷新页面的情况下,实时更新模块代码,提高开发效率。
    • 原生ESM支持:Vite直接利用浏览器对ESM的支持,无需额外转换,使得代码更加原生、高效。
    • 插件化扩展:Vite支持通过插件进行扩展,开发者可以根据自己的需求,定制开发流程。

    Vite的实现原理

    Vite的实现原理主要基于原生ESM、Rollup以及WebSocket等技术。

    • 原生ESM:Vite利用浏览器对ESM的原生支持,将项目中的模块按照ESM的规范进行组织。在开发过程中,Vite只会处理被引用的模块,而不会对整个项目进行打包,从而实现了极速的冷启动。
    • Rollup:虽然Vite没有直接采用Webpack作为打包工具,但它借鉴了Rollup的思想。Rollup是一个轻量级的模块打包器,它采用基于ESM的tree shaking技术,可以去除未使用的代码,减少打包体积。Vite在构建生产环境代码时,会利用Rollup进行打包。因此Vite还附带了一套 构建优化 的 构建命令,开箱即用。
    • WebSocket:为了实现热模块替换功能,Vite使用WebSocket在服务器和客户端之间建立了一个长连接。当文件发生变化时,服务器会通过WebSocket将更新后的模块发送给客户端,客户端收到更新后,会替换掉原有的模块,实现热更新。

    1.基于ESM的 Dev Server

    在Vite出现之前,传统的打包工具如Webpack通常会在启动开发服务器之前解析所有依赖并进行打包构建。这意味着Dev Server必须等待所有模块构建完成,即使在开发过程中只修改了一个子模块,整个bundle文件也会重新打包,导致启动时间随着项目规模增大而变长。

    相比之下,Vite充分利用了浏览器对ESM的原生支持。当代码执行到模块加载时,浏览器会动态地下载导入的模块,而不需要等待整个项目的构建完成。这种动态加载的方式实现了即时编译,使得暂时未用到的路由不会参与构建过程。因此,随着项目规模的增大和路由的增加,Vite的构建速度不会受到影响。

    2. 基于ESM的 HRM 热更新

    1. 模块标识符的处理:Vite 在处理模块时,通过识别 import 语句中的模块标识符,可以动态地构建出模块之间的依赖关系图。
    2. WebSocket 通信:Vite 启动一个 WebSocket 服务器,用于与客户端建立持久连接,实现双向通信。通过 WebSocket,Vite 可以向客户端发送消息,告知其发生了模块变化,并触发热更新操作。
    3. 模块替换:当开发者修改了某个模块的代码后,Vite 检测到变化后,会重新编译并构建该模块。然后,Vite 通过 WebSocket 向客户端发送更新消息,告知客户端有模块发生了变化。
    4. 客户端处理:客户端接收到更新消息后,会根据更新消息中的信息,以及之前构建好的模块依赖关系图,进行相应的模块替换操作。具体来说,它会以非阻塞的方式请求被更新的模块,然后将新的模块代码插入到当前页面中,完成热更新操作。
    5. 局部更新:Vite 可以实现局部更新,即仅更新发生变化的模块,而不需要重新加载整个应用程序。这样可以显著减少开发过程中的刷新时间,提高开发效率。

    总的来说,Vite 利用了浏览器原生对 ES 模块的支持,通过 WebSocket 实现了与客户端的实时通信,从而实现了基于 ESM 的热模块替换功能。这种实现方式使得开发者可以更快地看到代码修改后的效果,加快了开发迭代速度。

    3. Vite实现的核心流程

    1. 启动服务器
      • Vite首先启动一个开发服务器,该服务器使用原生ESM(ECMAScript模块)规范。
      • 服务器同时创建一个WebSocket连接,用于实现与浏览器的实时通信。
    2. 解析请求
      • 当浏览器请求一个模块(例如,通过