一、本堂课重点内容：

Vite的基本介绍
上手实战
vite整体框架
Vite进阶路线

二、详细知识点介绍：

为什么需要构建工具

我们为什么需要构建工具呢？在前面Webpack的体系课中我们也讲到了，主要就是解放人力，可以搞笑的模块化开发，进行资源编译，提高代码质量和产量。

Vite是什么

定位： 新一代的前端构建工具

组成：

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

核心特征：

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

Vite 基础功能等价于： webpack、webpack-dev-server、css-loder、style-loader、less-loader、sass-loader、postcss-loader、fil-loader···

Vite上手

这边我建议还是自己看官网的教程Vite (vitejs.net)

Vite整体架构

Pre-bundle预打包

避免node_modules过多的文件请求：
将CommonJS / UMD格式转化为ESM格式。

实现原理

服务器启动前扫描代码中用到的依赖
用 Esbuild 对代码进行预打包
改写 import 语句，指定依赖为预构建产物路径

Vite插件的使用

Vite 可以使用插件进行扩展，这得益于 Rollup 优秀的插件接口设计和一部分 Vite 独有的额外选项。这意味着 Vite 用户可以利用 Rollup 插件的强大生态系统，同时根据需要也能够扩展开发服务器和 SSR 功能。

Vite使用插件的示例：


npm add -D @vitejs/plugin-legacy

// vite.config.js
import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
})

三、课后个人总结：

为什么说Vite是新时代的构建工具呢？相对于Webpack来说，Vite最大的优点就是快！Webpack 启动后会做一堆事情，经历一条很长的编译打包链条，从入口开始需要逐步经历语法解析、依赖收集、代码转译、打包合并、代码优化，最终将高版本的、离散的源码编译打包成低版本、高兼容性的产物代码，这可满满都是 CPU、IO 操作啊，在 Node 运行时下性能必然是有问题。

而 Vite 运行 Dev 命令后只做了两件事情，一是启动了一个用于承载资源服务的 service；二是使用预构建 npm 依赖包。之后就一直躺着，直到浏览器以 http 方式发来 ESM 规范的模块请求时，Vite 才开始“「按需编译」”被请求的模块。

Vite 知识体系 | 青训营笔记