浅谈vite与webpack的区别及Vite为什么那么快

webpack

家喻户晓耳熟能详的前端编译工具在经历这么久的磨练后也开始显现出自己的颓势

1. 繁重的编译过程
2. 缓慢的加载及打包
3. 因为依赖node.js每次编译都要进行繁琐的递归去构建依赖图谱，导致热更新效率低下

vite

新一代的前端开发和构建工具强大的拥有强大的编译及高效的处理能力

build

webpack打包过程
1.识别入口文件
2.通过逐层识别模块依赖。（Commonjs、amd或者es6的import，webpack都会对其进行分析。来获取代码的依赖）
3.webpack做的就是分析代码。转换代码，编译代码，输出代码
4.最终形成打包后的代码
webpack 打包原理

1.先逐级递归识别依赖，构建依赖图谱

2.将代码转化成AST抽象语法树

3.在AST阶段中去处理代码

4.把AST抽象语法树变成浏览器可以识别的代码， 然后输出

因为需要递归识别依赖，构建依赖图谱。图谱对象就是类似下面这种

{
    
'./app.js':    {