深入理解Vite核心原理

最新推荐文章于 2024-09-16 08:47:17 发布

Ilikejkmeimei

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量211

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/Ilikejkmeimei/article/details/131707748

版权

Vite是一个快速的前端开发工具，利用ES模块实现快速冷启动和热模块替换，提供按需编译和零配置开发环境。相比Webpack，Vite在启动速度和开发迭代上更具优势，且原生支持Vue单文件组件。其插件系统允许扩展各种功能，通过动态加载实现高效开发。

摘要由CSDN通过智能技术生成

1 Vite是什么？

Vite是一个现代化的前端构建工具，用于快速开发基于Vue、React、Angular等框架的应用。它的目标是提供一种更快、更简单的开发体验。在尤雨溪开发Vue3.0的时候诞生。Webpack+ Webpack-dev-server。

Vite有如下特点：

快速冷启动：Vite利用ES模块的特性，在开发环境下采用原生ES模块的方式进行模块解析和引入，无需打包成单个文件，因此具有非常快速的冷启动速度，几乎可以立即启动开发服务器。

热模块替换：Vite支持热模块替换（HMR），在开发过程中无需完全刷新页面，可以实时更新修改的模块，提供了更快的开发迭代速度。

按需编译：Vite仅会编译当前正在编辑的文件及其依赖，而不是整个项目，这意味着只有在需要时才进行必要的编译，提高了开发效率。

零配置开发环境：Vite默认提供了一套现代化的开发环境配置，无需手动配置复杂的构建工具链，开箱即用。

Vue单文件组件支持：Vite原生支持Vue单文件组件（.vue文件），无需额外的构建步骤，可以直接在浏览器中使用。

插件系统：Vite提供了强大的插件系统，可以通过插件扩展各种功能，如支持TypeScript、CSS预处理器、自动化部署等。

Vite其核心原理是利用浏览器现在已经支持ES6的import,碰见import就会发送一个HTTP请求去加载文件。Vite启动一个 connect 服务器拦截这些请求，并在后端进行相应的处理将项目中使用的文件通过简单的分解与整合，然后再以ESM格式返回返回给浏览器。整个过程中没有对文件进行打包编译。

Webpack是先解析依赖、打包构建再启动开发服务器，Dev Server 必须等待所有模块构建完成，当我们修改了 bundle模块中的一个子模块，整个 bundle 文件都会重新打包然后输出。项目应用越大，启动时间越长。

而 Vite利用浏览器对ESM的支持，当 import 模块时，浏览器就会下载被导入的模块。先启动开发服务器，当代码执行到模块加载时再请求对应模块的文件,本质上实现了动态加载。

目前所有的打包工具实现热更新的思路都大同小异：主要是通过WebSocket创建浏览器和服务器的通信监听文件的改变，当文件被修改时，服务端发送消息通知客户端修改相应的代码，客户端对应不同的文件进行不同的操作的更新。

Vite 通过 chokidar 来监听文件系统的变更，只用对发生变更的模块重新加载，只需要精确的使相关模块与其临近的 HMR边界连接失效即可，这样HMR 更新速度就不会因为应用体积的增加而变慢。