3

vite简介

  • Vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发,在生产环境下基于 Rollup 打包。

vite作用

  • 快速的冷启动:不需要等待打包操作;
  • 即时的热模块更新:替换性能和模块数量的解耦让更新飞起;
  • 真正的按需编译:不再等待整个应用编译完成,这是一个巨大的改变。

vite运行原理

  • 在浏览器端使用 export、import 的方式导入和导出模块,在 script 标签里设置 type="module" ( ES Modules 目前主流的浏览器都已经支持)。

vite功能实现

  • 提供 web server:借用了 koa 来启动服务
  • 模块解析:核心是拦截浏览器对模块的请求
  • 支持 /@module/ :判断路径是否以 /@module/ 开头,如果是取出包名,去 node_module 里找到这个库,基于 package.json 返回对应的内容
  • 文件编译:拦截了对模块的请求并执行实时编译

相关资料


小磊哥er
409 声望37 粉丝

大前端工程师