第十一节课程笔记
Vite 基本概要
1.前端工程的痛点
——1）核心要素：资源；模块化：ESM,UMD、资源编译：高级语法编译、产物质量、开发效率
2.前端构建工具的意义
——1）模块化方案：提供模块加载方案，兼容不同模块规范
2）语法转译：高级语法转译，如：Sass，TypeScript，资源加载，如：图片，字体，worker 3）产物质量：产物压缩，无用代码删除，语法降级
4）开发效率：热更新
3.Vite 概览
——1）定位：新一代前端构建工具
2）两大组成部分：no-bundle开发服务，源文件无需打包； 生产环境基于rollup的bundler 3）核心特征:高性能，dev启动速度和热更新速度非常快；简单易用，开发者体验好
4.Vite 业界案例
——1）全球浏览器对原生ESM的普遍支持（目前占比92%以上）
2）基于原生语言（go，rust）编写前端编译工具；如go语言编写的esbuild，rust编写的SWC 5.Vite 优势
——1）浏览器原生ESM支持俩大元素：script标签增加type=“moudle”属性；使用ESM模块导入导出语法
2)基于原生ESM的开发服务优势：无需打包项目源代码；天然的按需加载；可以利用文件级的浏览器缓存
3）基于esbuild的编译性能优化：打包器bundler；编译器transformer；压缩器minifier Vite
上手实战与架构解析
1.项目初始化
2.使用 Sass/Scss & CSS Modules
3.使用静态资源
4.生产环境 Tree Shaking
Vite 进阶路线
1.深入双引擎
——esbuild，rollup官方文档；先了解基本使用再动手尝试各项常用配置，然后学习插件开发 2.Vite 插件开发 ——抽离核心逻辑，易于拓展；
3.代码分割(拆包)
4.JS 编译工具(Babel)
5.语法安全降级
6.服务端渲染(SSR)
——CSR是Client Side Render简称；页面上的内容是我们加载的js文件渲染出来的，js文件运行在浏览器上面，服务端只返回一个html模板。
SSR是Server Side Render简称；页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的html就可以了。
本文以Vue.js 做为演示框架来区分SSR和CSR。默认情况下，Vue.js可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。
服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。
7.深入了解底层标准
——Vite是新一代的前端构建工具，在尤雨溪开发Vue3.0的时候诞生。类似于Webpack+ Webpack-dev-server。其主要利用浏览器ESM特性导入组织代码，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。生产中利用Rollup作为打包工具，号称下一代的前端构建工具。
Vite有如下特点：
- 快速的冷启动:
No Bundle+esbuild预构建 - 即时的模块热更新: 基于
ESM的HMR，同时利用浏览器缓存策略提升速度 - 真正的按需加载: 利用浏览器
ESM支持，实现真正的按需加载
8.Vite 社区生态
——测试两者的 dev 命令运行耗时相差十倍，且理论上，项目越大性能差距越大，为什么呢？最大的原因是 Vite 在开发模式下并没有做太多打包操作！
Webpack 启动后会做一堆事情，经历一条很长的编译打包链条，从入口开始需要逐步经历语法解析、依赖收集、代码转译、打包合并、代码优化，最终将高版本的、离散的源码编译打包成低版本、高兼容性的产物代码，这可满满都是 CPU、IO 操作啊，在 Node 运行时下性能必然是有问题。
而 Vite 运行 Dev 命令后只做了两件事情，一是启动了一个用于承载资源服务的 service；二是使用 esbuild 预构建 npm 依赖包。之后就一直躺着，直到浏览器以 http 方式发来 ESM 规范的模块请求时，Vite 才开始“「按需编译」”被请求的模块。
