是什么让尤大选择放弃Webpack？面向未来的前端构建工具 Vite

写在开头

前两天在知乎看到过一篇文章，大致意思是讲：字节跳动已经开始“弃用Webpack”，尝试在自研构建工具中使用类似Vite的ESmodule构建方式。

引起下方一大片焦虑：

• Webpack是不是要被取代了？现在学Vite就行了吧
• Webpack还没学会，就又来新的了！

甚至有人搬出了去年尤大所发的一个动态：再也回不去Webpack了。

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

全方位对比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:
      '"use strict";\n\nvar _test = _interopRequireDefault(require("./test1.js"));\n\nfunction _interopRequireDefault(obj) {
    return obj && obj.