引言： Vite 是构建工具，高阶封装，Vite 的特点，如下所示：

• 开发时效率极高

• 开箱即用，功能完备

• 社区丰富，兼容 rollup

• 超高速热重载

• 预设应用和类库打包模式

• 前端类库无关

• 构建工具的意义

  1.构建工具能够提供模块加载方案，以兼容不同的模块规范

  2.能够实现高级语法的转译，如Sass、TypeScript等，优化资源加载，如图片、字体等

  3.能够压缩产物，删除无用代码，实现语法降级，提高兼容性

  4.能够热更新来提高开发时的体验，修改代码后的实时更新

• Vite 概览介绍

1. Vite 是一个现代化的前端构建工具，专注于提供快速的开发体验。

2. 它基于原生 ES 模块系统，利用浏览器的原生模块加载能力，实现快速的冷启动和热模块替换。

3. Vite 支持多种前端框架，如 Vue、React 和 Angular 等。

两大组成

1. No-bundle 开发服务，源文件无需打包
2. 生产环境基于 Rollup 的 Bundler

核心特征

1. 高性能，dev 的启动速度和热更新的速度非常快
2. 简单易用，开发体验好

• Vite 上手实战

初始化

初始化命令
pnpm create vite
// 安装依赖
pnpm install 
// 启动项目 
pnpm run dev

添加Sass依赖

pnpm i sass -D
<div className={style.header}>
  Header
  <p className={style.content}>Hello World</p>
</div>

<style>
.header {
  .content {
    color: skyblue;
  }
  color: red;
}
</style>

资源加载

function App() {
  return (
    <div>
      <a href="https://react.dev" target="_blank">
        <img src={reactLogo} className="logo react" alt="React logo" />
      </a>
    </div>
  )
}

• Vite 整体架构

• Vite 进阶路线

深入双引擎

插件开发