本节将主要介绍有关前端工程基本知识，同时讲解前端构建工具及解决问题，进而引出作为前端构建工具的 Vite 是什么及其在开发过程中的应用。
内容大纲：
1 浅谈构建工具
2 Vite概要介绍
3 Vite上手实践
4 Vite整体架构
5 Vite进阶路线
前端工程的痛点：
模块化
资源编译：高级语法的编译；
产物质量：代码体积、代码效能；
开发效率：热更新；
前端工具的意义：
模块化方案：1提供模块化加载方案；2兼容不同的模块规范；
语法转译：1高级语法转译，如Sass、TS；2资源加载，如图片、字体、worker；
产物质量：产物压缩、无用代码删除、语法降级；
开发效率：热更新；
Vite概览：
定位：新一代前端构建工具；
组成部分：
1No-bundle开发服务，源文件无需打包；
2生产环境基于Rollup的Bundler；
核心特征：
1高性能：dev启动速度和热更新速度非常快；
2简单易用，开发者体验好；
当下问题：
缓慢的启动—项目编译等待成本高；
缓慢的热更新—修改代码后不能实时更新；
原因：
1bundle带来的性能开销；
2JS语言的性能瓶颈；
行业趋势：
全球浏览器对原生ESM的普遍支持；
基于原生语言（go、rust）编写前端编译工具链；
如go语言编译的Esbuild、rust编写的SWC等；
基于原生ESM的开发服务优势：
无需打包项目源代码；
天然的按需加载；
可以利用文件及的浏览器缓存；
内置的WEB构建能力：
Vite开箱即用的功能等价于webpack、css-loader、less-loader等；
Vite实战环节
通过实际的命令行及编码操作，带领同学们逐步搭建起一个相对完整的脚手架，体验 Vite 各种内置功能，在实战环节后，本节课还将更进一步讲解 Vite 的整体架构，带领大家了解底层的实践原理。
项目初始化
输入项目名称、react、react-ts；
安装必要的框架；
接入常用的CSS方案：Sass/Scss和CSS Modules；
使用静态资源；
生产环境Tree Shaking；
优化原理：
1 基于ESM的import/export语句依赖关系，与运行状态无关；
2 在构建阶段将未使用的的代码进行删除；
Vite的直观印象：迅速响应，开箱即用；
关键技术：
单文件编译
优势：编译速度提升10-100倍；
局限性：不支持类型检查；不支持语法降级到ES5；
代码压缩
插件机制
Vite 进阶路线
在本节课中进一步介绍 Vite 的生态及进阶工程路线，带大家梳理前端架构领域中更为深层次的学习领域，帮助大家在日常生活中也能做到有的放矢地学习。
深入双引擎：esbuild、rollup.js
Vite插件开发：
1服务启动阶段
2请求响应阶段
3热更新阶段
4服务关闭阶段
代码分割（拆包）：
拆包前：
无法进行并发请求；
缓存复用率低；
拆包后：解决上述问题；
JS编译工具（Babel）：
出现原因：
JS语法标准繁多，浏览器支持程度不一；
开发者需要高级语法；
语法安全降级：
上层解决方案：@ Vitejs/plugin-legacy;
底层原理：
1借助Babel进行语法自动降级；
2提前注入Polyfill实现，如core-js等；
服务端渲染（SSR）
一种常见的渲染模式，用于提升首屏性能和SEO优化。
深入了解底层标准：
重点特征：
CJS规范、ESM规范、HTTP2.0特性等
Vite社区规范
Github 40k+ star ，并且目前还在持续维护；
官方提供插件：
@ Vitejs/plugin-vue，提供Vue3支持；
@ Vitejs/plugin-vue-jsx，提供Vue3JSX支持;
@Vitejs/plugin-react，提供React支持；
@Vitejs/plugin-legacy，提供低版本浏览器降级支持；
众多框架内置：Nuxt、SvelteKit、Astro、Vitepress
