跟chatGPT一起复习前端 —— Vite

前言

又到一波面试准备的时刻，整理了一波前端相关要点内容，配合chatGPT完成要点内容的整理输出，有纠正错误和需要补充的小伙伴可以在这里留言，及时更新。

• 跟chatGPT一起复习前端 —— HTML & CSS
• 跟chatGPT一起复习前端 —— JavaScript
• 跟chatGPT一起复习前端 —— Vue
• 跟chatGPT一起复习前端 —— React
• 跟chatGPT一起复习前端 —— Webpack
• 跟chatGPT一起复习前端 —— 浏览器
• 跟chatGPT一起复习前端 —— 计算机网络
• 跟chatGPT一起复习前端 —— Vite
• 跟chatGPT一起复习前端 —— TypeScript
• 跟chatGPT一起复习前端 —— 安全问题
• 跟chatGPT一起复习前端 —— 前端工具
• 跟chatGPT一起复习前端 —— 手写方法
• 跟chatGPT一起复习前端 —— 数据结构与算法

Vite是什么？

Vite是一款由尤雨溪开发的前端构建工具，它的特点是快速、简单。Vite的核心思想是利用ES6的模块化特性，将每个文件作为一个模块，通过浏览器原生支持的ES6模块加载方案，实现了快速的冷启动。Vite还支持热更新，可以在不刷新页面的情况下更新代码。

Vite的原理是什么？

具体来说，Vite在开发环境下会启动一个服务器，当浏览器请求某个模块时，服务器会根据请求路径读取对应的文件，并解析其中的依赖关系。如果该模块已经被解析过，则直接返回缓存结果；否则，根据该模块的依赖关系递归解析其依赖模块，并将所有依赖模块合并成一个JavaScript文件返回给浏览器。

Vite是否支持commonjs写法

Vite支持commonjs写法。如果引入的三方组件或者三方库采用了CJS写法，Vite在预构建的时候就会将CJS模块转化为ESM模块.

Vite构建流程是什么

Vite的构建流程是：Vite将会检测到所有被加载的源文件中的裸模块导入，并执行以下操作：

1. 预构建，它们可以提高页面加载速度，并将CommonJS/UMD转换为ESM格式。预构建这一步由esbuild执行，这使得Vite的冷启动时间比任何基于JavaScript的打包器都要快得多。
2. 重写导入为合法的URL，例如/node_modules/.vite/deps/my-dep.js?v=f3sf2ebd以便浏览器能够正确导入它们。

Vite打包流程是什么

Vite使用Rollup作为打包工具，而不是像Vue CLI一样使用Webpack。Vite的打包流程是按需编译返回，完全跳过了打包这个概念，服务器随起随用。你可以使用vite build命令将应用部署到生产环境中。默认情况下，它使用<root>/index.html作为其构建入口点，并生成能够静态部署的应用程序包。

Vite是如何实现预构建

Vite的预构建原理是将第三方依赖进行打包，并在开发环境下使用这些打包过的第三方依赖。Vite会扫描入口文件，然后通过这些入口，扫描所有用到的依赖，将多个依赖进行打包，修改这些模块的引入路径。

在预构建过程中，Vite会对所有代码视为原生ES模块，只有bare import（裸依赖）会执行依赖预构建。

如果你想了解更多关于Vite的依赖预构建的细节，可以参考这篇文章：快速理解 Vite 的依赖预构建。

Vite的热更新原理

Vite的热更新原理可以大体总结为下面几步:

• 修改代码，vite server 监听到代码被修改
• vite 计算出热更新的边界（即受到影响，需要进行更新的模块）
• vite server 通过 websocket 告诉 vite client 需要进行热更新
• 浏览器拉取修改后的模块
• 执行热更新的代码

在服务器启动时，vite会创建WebSocket实例，并通过chokidar监听文件修改。对请求的HTML文件注入客户端热更新代码。加载客户端热更新代码时，创建WebSocket实例，并注册监听。

Vite支持哪些插件？

Vite支持很多插件，包括但不限于：

• vite-plugin-vue2：支持Vue2的Vite插件。
• vite-plugin-vue3：支持Vue3的Vite插件。
• vite-plugin-eslint：Vite的eslint插件，让你的项目可以方便的得到eslint支持。
• vite-plugin-style-import：按需加载组件库样式的Vite插件。
• vite-plugin-svg-icons：将svg图标转换为组件并按需加载的Vite插件。

你可以在Vite官方文档中查看更多关于Vite插件的信息。

如何指定Vite插件执行顺序

一个Vite插件可以额外指定一个enforce属性来调整它的应用顺序。enforce的值可以是pre或post。解析后的插件将按照以下顺序排列：Alias -> Resolve -> Transform -> Load -> Optimize -> Generate。

vite常见的hook有哪些？

• configureServer hook可以用于配置开发服务器；
• configResolved hook可以用于在配置解析完成后执行操作；
• transformIndexHtml hook可以用于转换index.html文件；
• transform hook可以用于转换文件；
• resolveId hook可以用于解析导入的模块；
• load hook可以用于加载模块；
• handleHotUpdate hook可以用于处理热更新。

为什么vite比webpack快

Vite比Webpack快的原因有很多，其中一些原因是：Vite启动速度非常快，因为它不需要打包，也就无需分析模块依赖、编译。而Webpack则需要先打包，然后再启动开发服务器，请求服务器时直接给予打包结果。Vite在HRM方面，当某个模块内容改变时，让浏览器去重新请求该模块即可，这样就不需要重新构建整个应用程序。而Webpack则需要重新构建整个应用程序。此外，Vite使用ESM作为默认模块格式，这使得HMR更加优秀，达到极速的效果。

vite对比webpack有什么区别？

Vite和Webpack的区别主要在于以下几点：

1. 冷启动速度：Vite的冷启动速度比Webpack快，不需要等待打包。
2. 热模块更新：Vite支持即时的热模块更新，而Webpack需要手动刷新页面。
3. 按需编译：Vite真正的按需编译，不用等待整个项目编译完成，而Webpack需要等待整个项目编译完成。
4. 打包概念：Vite完全跳过了打包这个概念，而Webpack则是先将代码打包，然后启动开发服务器。
5. 构建原理不同：Webpack采用的是静态分析的方式对模块进行打包，需要在构建时将所有模块打包成一个或多个bundle.js文件，构建速度慢，而Vite则是基于原生ES模块的动态导入实现的，他不需要打包，而是在浏览器请求对应模块时，会即时地编译和执行对应的代码，构建速度较快。
6. 对于源码如何被托管以及支持哪种模块规范：Vite和Webpack的主要不同在于开发环境下对于源码如何被托管以及支持哪种模块规范。
7. 依赖预构建：Vite在首次启动时，会进行依赖预构建。依赖预构建有两个目的：CommonJs和UMD的兼容性；缓存依赖项，加快后续启动速度。
8. 插件机制：Vite的插件机制更加灵活，可以更方便地扩展功能。
9. 配置方式：Vite的配置方式更加简单明了。