vite为什么快

1,646 阅读3分钟

这是我参与更文挑战的第3天,活动详情查看: 更文挑战

注:以下是个人理解、如有不对还望指正!

webpack打包流程

通过js入口去扫描这些应用引入的子模块、等模块全部被解析完后、其中包括一些动态模块也会被解析、然后把这些模块注入到index.js中、 然后启动devserve等待访问!项目越来越大启动时间就会越来越长、但是其实很多时候首屏所使用的js都是比较少的、所以我们其实不需要把全部都打包进来、我们看下下方打包流程图、加深下印象

20210319152356132.png

vite打包流程

启动devserve服务、利用es6模块import会以请求的方式加载模块、因为首屏只有少量的js模块、而且动态的模块是不会被加载进来的、所以这比webpack打包启动要快的原因!

20210319152434863.png

vite具体做了什么

除了打包的流程和webpakc不同以外、他还做了重写引入模块路径、对一些模块请求前面加上/@modules/标记, 重写后浏览器会再次发送请求、vite使用koa写的、在获取请求路径的时候拦截@modules标记、然后去node_modules获取对应模块资源

vite遇到的问题

他既然这么快、那在构建中是否也会遇到问题呢?遇到问题他是如何解决的呢、那么在VUECONF2021里面

  • 文件的每一个转换、Transform性能问题、也是最大的一个问题

    在模块进行转换的时候尽可能使用一些性能高的工具、然后对Transform转换的结果、返回在结果到浏览器的时候会会加上http缓存头、这样下次直接使用缓存的结果

  • 非ESM模块兼容比如,TS..JSX..css等非ESM模块

使用esbuild去转换非ESM模块 代替TSC/Babel 、esbuild是使用Go语言写的、听说比js快10到100倍、也听说耗时只有webpack的2% ~ 3%、Go因为并行性设计的、和线池直接共享内存也正是因为这些所以vite在2.0版本使用了esbuild

  • ESM不能加载node模块

使用ex-module-lexer这个工具扫描import语法、然后使用magic-string重写node模块引入路径

  • node的其他问题(CJS模块兼容/node 模块请求数量较多、需要一个一个文件请求) 将Node模块打包成一个文件、减少页面的请求次数、提高加载速度、然后可对模块打上缓存标记

总结

  • 打包流程的不一样、面对首屏其实我们所需要加载的资源并不多、这在一定程度上做到了最大化懒加载、利用ESM模块会去使用http请求的方式去重写路径并拦截路径返回到浏览器、并对一些结果进行设置http缓存头、同时vite还引入了比js更快的esbuild工具、该工具使用目前比较火的Go语音来开发的!