vite 是一个工程化构建的工具，它相比于webpack，能够显著提高开发和构建速度。
vite 在开发环境其实是不进行编译的，vite 利用原生的es模块（js里，原生es模块就是esm）通过构建一个开发服务器（静态资源服务器）来在浏览器里运行。因为浏览器支持esm后，所以vite不用像webpack那样，从入口文件开始，对js进行编译，通过不同的loader编译其它不同的文件，通过plugin扩展其功能（vite也有插件，只是不像webpack这么丰富）最终输出一个或多个编译后的文件。
vite 利用浏览器支持esm的特性，在开发环境中只是构建一个静态资源服务器，加上一些其他的功能：
- 预构建：通过esbuild进行预构建，预构建做了两件事，一、原生的esm不支持非路径引入，预构建重写导入为合法的 URL；二是通过esbuild，在构建中做了静态资源分析，捆绑commonjs，css，等其它，利用了esm特性实现了tree shaking 构建了一个开发服务器。急速无需缓存。
esbuild也是一个web构建工具。对标rollup和webpack - 热更新： vite 通过esmHMR模块实现热更新，vite构建项目自动实现，无需自己添加修改配置。如果想要手动处理热更新，Vite 通过特殊的
import.meta.hot对象暴露手动 HMR API。 - ts，vite支持ts。esbuild，vite，webpack天然支持ts。vite只负责把ts转成js，也就是只编译，不进行类型检查，类型检查用eslint
- vite支持vue，jsx，tsx。其中是esbuild可以转义js，ts，jsx，css，go等类型文件
- vite 支持静态资源和glob的导入，vite 通过import.meta.glob函数从文件系统中导入文件（这个不是esm和web标准，是vite特有的功能）
- vite 支持webAssembly和web workers。其中webAssembly需要引入插件处理。
webAssembly是一个面向web的虚拟指令集，相当于浏览器可识别的web汇编语言。现在比较流行的是webAssembly+rust开发。（c和c++也是常用语言）
web workers：html5提供的浏览器多线程解决方案 js是单线程的，用于大量数据计算，图像处理等计算密集型任务，谨慎选择应用场景。缺点：没有dom访问权限
vite在生产环境：由于浏览器对esm的支持，esm文件只是经过esbuild预编译也可以在浏览器里运行，但是为了更好的加载性能，以及tree shaking，懒加载和代码分割等功能，所以vite用rollup进行代码编译。
rollup的特点是：较webpack轻便，配置简单，静态资源分析，tree shaking，模块化处理直接使用的是esm，不像webpack为了兼容commonjs，打包出的文件多了很多life文件。
评论