vite

vite的原理

ES Modules

vite的成功得益于现代浏览器对于基于ECMAScript 标准原生模块系统（ES Modules）实现。 目前主流浏览器(IE11除外)都已经支持。他允许我们在浏览器使用export、import 的方式导入和导出模块，在 script 标签里设置 type="module"

<script type="module">
  import { createApp } from './main.js‘
  createApp()
</script>

浏览器会识别添加type="module"的 <script> 元素，浏览器会把这段内联 script 或者外链 script 认为是 ECMAScript 模块。然后浏览器会被这里面的import引用发起一个http请求，请求获取文件中的内容。 因此我们对于第三方的模块，可以不用打包合并,而是通过import 这种方式去发起http 请求，获取代码。这也是vite的主要实现思路。 如果你对ES Modules 不够了解。可以去看看ES Modules的规范

vite的工作流和冷启动

1. 首先是启动一个静态资源服务器
2. 找到项目的入口，开始加载入口文件
3. 当声明一个 script 标签类型为 module 时，浏览器就会像服务器发起一个GET
4. Vite 通过劫持浏览器劫持浏览器劫持浏览器的这些请求，并在后端进行相应的处理，将项目中使用的文件通过简单的分解与整合，然后再返回给浏览器。

从上面的分析可知: vite主要做了以下事情：

• 1. 启动了一个静态资源服务器
• 1. 只需要在浏览器请求源码时进行转换并按需提供源码 vite整个过程中没有对文件进行打包编译，至于其他加载的工作就交给了浏览器,所以其运行速度比原始的webpack开发编译速度快出许多。

vite的热更新

传统打包器是将项目打包之后的资源存入电脑的内存之中，这样他们只需要在文件更改的时候，将对应的模块进行失活，但是它仍然需要重新构建并重载页面。 所以像webpack这类的打包工具支持了动态模块热重载(HMR)，允许一个模块替换自己，而对其余页面没有影响。但是在实践中。我们发现HMR的速度会随着项目的增大而降低(原因在 目前打包工具的困境 这一节已经分析过了)

而在vite中HMR 是在原生 ESM 上执行的。当编辑一个文件时，Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失效（大多数时候只需要模块本身），使 HMR 更新始终快速，无论应用的大小。

vite的按需加载

为什么说vite才是真正的按需加载呢？难道webpack不是真正的按需加载吗？
如果你想知道，那么你可以看看去看看webpack的原理，这里我简单介绍一下 webpack其实在开始构建打包的时候，还是对所有的文件进行一次打包构建，只是在webpack遇到 import( * ) 这种语法的时候,会另外生成一个chunk; 只有在合适的时候去加载import中的内容
从上面的分析可以知道。不管我们这段import的代码何时执行，我们对需要对它进行一定的打包

但是vite不一样，只有在你真正的需要加载的时候，浏览器才会发送import请求，去请求文件中的内容，所以才说vite才是真正的按需加载