简介
1 .Esbuild 是一款基于Go语言开发的js打包工具，最大的特点就是速度快
image.png
2 .Vite 借助esbuild 能快速完成项目打包，文件转换的能力来进行预构建，内容转换
2 .快的原因
1 .go 语言开发，多线程打包，代码直接编译成机器码，webpack 被人诟病构建速度慢，主要是在打包过程中，存在大量的resolve,load,transform,parse，这些操作都是通过js代码来执行的。js不是高效的语言，执行过程中要先编译后执行，而且单线程并且不能利用多核cpu优势，和go相比，效率很低
2 .可以充分利用多核cpu优势
关键api transform & build
1 .transform：转换的意思，通过这个api，可以将ts,jsx,tsx 等格式的内容转换为js,transfrom只负责文件内容转换，并不会生成一个新的文件
2 .build ,执行构建逻辑，根据指定的单个或者多个入口，分析依赖，使用loader将不同格式的内容转换为js内容，生成一个或者多个bundle文件
esbuild 在Vite 中的巧妙使用
1 .预构建
1 .主要实现以下两个目的，将非ESM 规范的代码转换为符合ESM规范的代码
2 .将第三方依赖内部的多个文件合并为一个，减少http请求数量
1.1 寻找第三方依赖
1 .定义一个带onResolve hook,onLoad hook,esbuild plugin
2 .执行esbuild 的build 方法做打包构建
3 .代码中解析模块的路径的时候，会触发onResolve hook.在onResolve hook触发时，会传入模块的路径，根据路径，我们就可以判断出第三方依赖还是业务代码
4 .esbuild 完成构建，项目中的第三方依赖也就收集完毕了。所有的第三方依赖都会收集到一个deps列表中
1.2 合并，转换第三方依赖
1 .知道了项目中的第三方依赖以后，在做合并，转换操作就非常简单了
2 .vite直接通过esbuild提供的build方法，指定entryPoints为收集到的第三方依赖，format为esm，在做一次打包构建
3 .这一次会对第三方依赖做合并，转换操作。打包构建完成以后，再把构建内容输出到/node_modules/.vite/deps/下
4 .通过两次esbuild.build 预构建就完成了.第一次是找，第二次是真的构建
5 .寻找这些应该可以从package.json 里面拿。大部分都是没啥问题的,打包的时候再走依赖收集。
2 .内容转换
1 .Vite 中源文件的转换是在dev server 启动之后通过中间件实现的
2 .中间件对源文件的处理，分为resolve,load,transform,parse四个过程
3 .resolve: 解析url,找到源文件的绝对路径
4 .load: 加载源文件，如果是第三方依赖，直接将预构建内容返回给浏览器，继续走transform,parse
5 .transform:对源文件内容做转换，ts->js,less->css ，转换完的内容直接返回给浏览器
6 .parser:对转换以后得内容做分析，找到依赖模块，对依赖模块做预转换。等浏览器发起请求后，如果已经完成转换，直接将缓存内容返回给浏览器
7 .整个transform 阶段，是使用esbuild.transform时限的，对比webpack 的 loader处理源文件，是非常快捷，简单的
``
网友评论