Vite 项目构建优化详解

1. 相关面试题 

1.1. Vite相比Webpack有哪些优势？

Vite 相较于 Webpack 的主要优势包括：

• 极速启动：Vite 使用原生 ES 模块进行开发时的依赖加载，无需像 Webpack 一样对整个项目进行预打包。因此，Vite 的冷启动速度非常快，尤其是在大型项目中尤为明显。

• 即时热更新（HMR）：Vite 的 HMR 速度更快更灵敏，因为它基于 ES 模块，仅更新受影响的模块，而不需要重新构建整个包。

• 更少的配置：Vite 的默认配置已经足够健全，开箱即用，开发者通常不需要像使用 Webpack 一样编写大量的配置文件。

• 现代化浏览器支持：Vite 针对现代浏览器优化，默认使用 ES6+ 语法，省去了对旧浏览器的兼容配置。

• 插件生态：虽然 Vite 插件生态相对年轻，但其设计简单且功能强大，能够满足大多数场景的需求。

• 构建速度快：Vite 使用 esbuild 进行预构建，极大提高了依赖解析和打包的速度。此外，Vite 还使用 Rollup 作为生产环境打包工具，具有较好的打包优化能力。

• 调试友好：Vite 生成的源码更接近开发者的源码，调试体验更好，错误追踪更准确。

2. 开发构建优化详解

2.1. 开发模式优化

2.1.1. 启用模块热替换（HMR）

模块热替换（HMR, Hot Module Replacement）是 Vite 开发服务器的一项核心功能，它允许你在不完全刷新页面的情况下，实时更新模块的内容。Vite 默认启用 HMR，你只需要在开发过程中编写代码，HMR 将自动处理模块的更新，保持状态不变，提升开发效率。

• HMR 机制原理：HMR 是通过 WebSocket 与浏览器进行通信，当模块文件发生变化时，Vite 服务器将重新编译该模块，并通过 WebSocket 通知客户端进行热替换。与传统的完全刷新不同，HMR 仅更新变化的部分，大大提高了调试体验。

• 示例： 假设你在开发一个 React 应用，有一个组件 HelloWorld。在你修改组件内容后，HMR 会自动更新浏览器中的组件实例，而不刷新页面。

import React from 'react';

function HelloWorld() {
  return 
Hello, World!
;
}

export default HelloWorld;

当你修改 Hello, World! 为其他内容时，浏览器中对应的部分会自动更新，而页面不会重新加载。

2.1.2. 调整 optimizeDeps 选项