发表更新4 分钟读完 (大约546个字)0次访问

vite揭秘

vite的底层原理是什么？

vite核心原理就是利用了现在浏览器原生支持ES6的import，碰见一个import就发送一个http请求去加载文件，vite启动一个koa服务器拦截这些请求，在后端经过相应处理后再将文件ESM格式返回浏览器，整个过程没有对文件打包编译，实现了按需加载以及更快的运行速度。

  1. 基于浏览器ESM的支持，实现真正的按需加载

  2. 高效的热更新：基于ESM实现，利用HTTP头来加速整个页面的重新加载，同时利用浏览器缓存策略提升速度

  3. 快速的冷启动：采用No Bundle和esbuild预构建，速度远快webpack

为什么需要esbuild预构建？

  1. 支持commonJS依赖，因为vite是基于浏览器原生支持的ESM的实现的，这就要求代码模块必须是ESM模块，所以需要将commonJS文件提前处理转化为ESM模块并缓存如node_modules/.vite

  2. 减少模块和请求数量，比如将lodash-es这种包含很多个子模块的工具库合并为单个模块，提高页面加载性能

为什么使用esbuild？

  1. 大多数打包工具都是基于js实现的，但是js是解释型语言，边运行边解释，而esbuild选择的是go语言编写，可直接编译为原生代码，编译时直接将语言转换为机器语言，在启动的时候直接执行，在CPU密集场景下，go更具性能优势

  2. js是单线程语言，也可以使用webworker进行多线程操作，但是go天生的多线程优势对构建流程进行了优化，可以更充分利用cpu资源

特点

  1. 基于浏览器es module import实现编译服务

  2. 基于esbuild做依赖预构建

  3. 基于hash query做强缓存和缓存更新

  4. 兼容rollup的vite插件可以在开发服务和rollup中同时跑

评论

×