这是我参与「第四届青训营 」笔记创作活动的的第22天

vite与webpack的运行流程

webpack

Webpack 启动后会做一堆事情，经历一条很长的编译打包链条，从入口开始需要逐步经历语法解析、依赖收集、代码转译、打包合并、代码优化，最终将高版本的、离散的源码编译打包成低版本、高兼容性的产物代码，满满都是 CPU、IO 操作，在 Node 运行时下性能必然是有问题。

vite

而 Vite 运行 Dev 命令后只做了两件事情，一是启动了一个用于承载资源服务的 service；二是使用 esbuild预构建 npm 依赖包。之后就一直躺着，直到浏览器以 http 方式发来 ESM 规范的模块请求时，Vite 才开始“按需编译”被请求的模块。

对比

这么一对比，Webpack 是啥都做了，浏览器只要运行编译好的低版本(es5)代码就行；而 Vite 只处理问题的一部分，剩下的事情交由浏览器自行处理，那速度必然快。

vite的默认模块

Tree Shaking

优化原理：

1. 基于ESM的import和export语句依赖关系与运行时状态无关
2. 在构建阶段将未使用的代码进行删除
3. Tree Shaking默认时开启的

为什么要进行预打包

1. 避免node_modules过多的文件请求
2. 将commonJS格式转化为ESM格式

实现原理

1. 服务启动前扫描代码中用到的代码依赖
2. 用esbuild对代码进行预打包
3. 改写import语句，指定依赖为预构建产物路径

esbuild

优势：提升编译速度10 -100 缺陷：不支持语法检查。不支持语法降级到es5

总结

vite拥有良好的生态，在前端的开发阶段可以更快的将项目运行起来，给前端开发工作者提供相当好的便利。