bundless构建工具与传统webpack的区别。

摘录&心得

  • Vite是一种bundleless构建工具
    • Vite 基于 ESM，因此实现了快速启动和即时模块热更新能力；
      • 当出现 script 标签 type 属性为 module 时，浏览器将会请求模块相应内容。
    • Vite 在服务端实现了按需编译。
      • 在服务端完成模块的改写（比如单文件的解析编译等）和请求处理
    • 和浏览器端建立 socket 连接，实现 HMR（热更新）
    • Vite 在开发环境下并没有打包和构建过程。

      Vite工作流程

  1. 开发者在代码中写到的 ESM 导入语法会直接发送给服务器
  2. 服务器也直接将 ESM 模块内容运行处理后，下发给浏览器。
  3. 现代浏览器通过解析 script module，对每一个 import 到的模块进行 HTTP 请求
  4. 服务器继续对这些 HTTP 请求进行处理并响应。

    Vite工作原理

    路径对比

    image.png
  • 如果判断 import 的资源是绝对路径，即可认为该资源为 npm 模块，并返回处理后的资源路径。比如上述代码中，vue → /@modules/vue。

  • 如果判断 import 的资源是相对路径，即可认为该资源为项目应用中资源，并返回处理后的资源路径。比如上述代码中，./App.vue → /src/App.vue。

    与webpack对比

    image.png

    Vite HMR

    image.png

  • 通过 watcher 监听文件改动

  • 通过 server 端编译资源，并推送新模块内容给浏览器
  • 浏览器收到新的模块内容，执行框架层面的 rerender/reload