Vite和Webpack的核心差异

写在开头

• 最近的vite比较火，而且发布了2.0版本，vue的作者也是在极力推荐

• 在之前的文章里面我提到过，vite的缺点在于目前的生态不够webpack成熟，但是只要能弥补这个缺点，便有很大概率能替代目前webpack的大部分市场

全方位对比vite和webpack

webpack打包过程

• 1.识别入口文件

• 2.通过逐层识别模块依赖。（Commonjs、amd或者es6的import，webpack都会对其进行分析。来获取代码的依赖）

• 3.webpack做的就是分析代码。转换代码，编译代码，输出代码

• 4.最终形成打包后的代码

webpack打包原理

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

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

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

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

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

{ './app.js':
   { dependencies: { './test1.js': './test1.js' },
     code:
      '&