Vite面经

8 小时前

/ ,

2

Vite 是一个由 Evan You（Vue 的作者）创建的现代构建工具，旨在提供快速的开发体验和高效的生产构建。Vite 的主要特点是快速的 热更新（HMR），快速的构建速度，以及支持原生的 ES 模块（ESM）开发。

1. 命令行输入 `vite` 后发生的事情

当你在命令行输入 vite 并按下回车时，Vite 会启动本地开发服务器，并进行以下几步操作：

1.1 启动开发服务器

启动本地服务器：Vite 会启动一个本地开发服务器，默认情况下会在 localhost:3000 端口运行。你可以在浏览器中查看你的项目。
解析配置文件：Vite 会读取项目中的配置文件（通常是 vite.config.js），根据配置来调整构建行为。这个文件用于配置项目路径别名、插件、开发服务器等。
1.2 处理原生 ES 模块
在开发过程中，Vite 会利用浏览器对 ES模块（ESM） 的原生支持来加载和热更新模块。对于每个请求，Vite 会根据模块路径直接提供原始文件，而不是将其打包成一个大文件。
例如，当你请求一个 JavaScript 模块时，Vite 会直接将该模块作为 ESM 提供给浏览器，而不进行额外的打包。

1.3 热模块替换（HMR）

Vite 的开发服务器支持 热模块替换（HMR），这意味着当你修改文件时，Vite 会只更新发生变化的部分，而不需要刷新整个页面。这样可以显著提高开发效率，尤其是在大型应用程序中。
例如，你修改一个组件时，Vite 会只重新渲染那个组件，而不会重新加载整个页面，甚至可以保留组件的状态。

1.4 处理静态资源和 CSS

Vite 会自动处理静态资源（如图片、字体等）和 CSS 文件。如果使用了 CSS 预处理器（如 Sass 或 Less），Vite 会自动解析并进行转换。
对于动态导入的模块或代码分割，Vite 会使用原生的 ES 动态导入来进行模块加载。

2. 生产构建（使用 `vite build` 命令）

当你使用 vite build 命令进行生产构建时，Vite 会执行以下步骤：

2.1 代码分割与打包

代码分割：Vite 会将你的应用拆分成多个小的、按需加载的模块。这意味着在生产环境中，Vite 会将代码按页面和模块分割成多个文件，只加载用户当前需要的部分，减少首次加载的时间。
基于 Rollup 的构建：Vite 的生产构建是基于 Rollup 的，它会对你的项目进行打包、压缩、优化，生成最终的静态文件。Rollup 是一个专注于高效打包的工具，它支持 ES 模块，生成的文件可以被浏览器或 Node.js 环境直接使用。

2.2 静态资源处理与优化

Vite 会优化并压缩 JavaScript、CSS、图片等资源，确保生成的文件尽可能小。
对于 CSS，Vite 会使用 PostCSS 进行处理，例如自动添加前缀、压缩等。

2.3 生成构建文件

Vite 会根据打包的配置（通常通过 vite.config.js）生成优化后的生产文件，包括：
- 压缩的 JavaScript 文件。
- 分割的 CSS 文件。
- 静态资源（如图片、字体）会被复制到 dist/ 目录。
最终的构建产物会放在 dist/ 目录下，可以部署到生产环境中。

Vite 和 Webpack 的区别 [小米]

Vite 和 Webpack 都是现代前端构建工具，它们的目的都是提高开发效率、优化生产构建，但是它们的设计理念和工作原理有很大不同。以下是 Vite 和 Webpack 之间的一些主要区别：

Vite：

基于原生 ES 模块：Vite 使用浏览器原生的 ES 模块（ESM）支持。在开发环境中，Vite 不进行传统的捆绑操作，而是直接提供每个模块的原始文件，浏览器通过原生模块加载进行构建。
无需复杂的配置：Vite 提供了一个非常简单的配置，开箱即用，适合大多数项目。
基于 Rollup 的优化：Vite 使用 Rollup 作为生产构建工具，Rollup 是专注于优化的打包工具，支持高效的代码分割、Tree Shaking 和最小化输出。

Webpack：

传统的打包工具：Webpack 是一个打包工具，会将所有模块及其依赖打包成一个或多个文件（bundle），然后在浏览器中加载。这种打包方式使得项目的部署变得更简单，但会影响开发时的性能。
开发时整体构建：Webpack 在开发过程中通常会实时编译整个项目，虽然有开发模式（webpack-dev-server）和热更新（HMR），但每次代码修改时，Webpack 仍然需要重新打包。
兼容性广泛：Webpack 不依赖于现代浏览器支持原生 ES 模块，可以支持更多的环境和浏览器。
复杂的配置：Webpack 的配置较为复杂，尤其是当项目需求增多时，配置可能变得更加冗长，需要大量的插件和 loader 配合使用。
强大的优化功能：Webpack 提供强大的插件和配置选项来实现代码分割、Tree Shaking、懒加载等。

热更新原理[小米]

热更新（HMR）是一种技术，通过仅替换修改过的模块，而非刷新整个页面，来提升开发效率。它的原理是通过开发服务器监听文件变化，并将修改后的模块动态推送到浏览器。浏览器接收到更新的模块后，只更新变化的部分，而不重新加载页面，保持应用的状态（如输入框内容、滚动位置等）。

Webpack 通过 webpack-dev-server 或 webpack-hot-middleware 来支持 HMR。当文件发生变化时，Webpack 会重新编译修改的模块，并通过 WebSocket 将更新的模块推送到浏览器。浏览器接收到更新的模块后，React 或其他框架会局部更新页面，保留应用状态。
Vite 使用原生的 ES 模块（ESM）和开发服务器实现 HMR。Vite 的开发服务器在文件变化时仅重载被修改的模块，而不会刷新整个页面。由于 Vite 利用浏览器原生支持的模块热替换，更新的速度比 Webpack 更快。它通过 WebSocket 与浏览器通信，推送更新，并保持应用状态。

使用社交账号登录