Vue3 + Vite 为什么这么火

1、使用感受
在使用vite构建项目后，真的炒鸡快！之前的老项目webpack启动构建到30%的时候，新项目的vite早已经完毕。（并不是说webpack不好，只是相对热更新的速度而言比特是真香 ^^

2、why vite 官方解释

在浏览器支持 ES 模块之前，JavaScript 并没有提供原生机制让开发者以模块化的方式进行开发。而是使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。
当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。
浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。

• 服务器启动
  

  image.png

• 热更新
  在 Vite 中，HMR 是在原生 ESM 上执行的。当编辑一个文件时，Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失活^[1]（大多数时候只是模块本身），使得无论应用大小如何，HMR 始终能保持快速更新。

  • ESM又是什么呢
    ECMAScript 模块（ESM）是在 Web 中使用模块的规范。 所有现代浏览器均支持此功能，同时也是在 Web 中编写模块化代码的推荐方式。

默认情况下，webpack 将自动检测文件是 ESM 还是其他模块系统。
Node.js 通过设置 package.json 中的属性来显式设置文件模块类型。 在 package.json 中设置 "type": "module" 会强制 package.json 下的所有文件使用 ECMAScript 模块。 设置 "type": "commonjs" 将会强制使用 CommonJS 模块。

{
  "type": "module"
}

现在随着浏览器的发展和技术规范的推进，当代大部分浏览器都已经支持·type="module"的script标签下直接执行解析import语句，在直接执行到这一步的时候，浏览器会自动根据目录路径去请求路径下的资源，只要触发了请求，我们就可以“拦截”了，把请求的assets资源截取进行处理，返回给浏览器执行。

依照上述技术理论，只要有一个index.js就可以一步步import不停地向下收集依赖，直至最后一个依赖，依次执行，前几年的打包工具（类似webpack）不就做了这个事吗？当然他做的整合更加复杂和详细，但是现在浏览器都已经支持了，这一步就可以交给浏览器做了，我们要做的，就是对依赖进行解析。

未完待续~