浅谈构建工具
Vite概要介绍
Vite上手实战
Vite整体架构
Vite进阶路线
为什么需要构建工具？
前端工程的痛点
核心要素——资源
模块：将项目拆分成不同部分，分而治之 JS没有统一的规范
资源编译：浏览器不能识别，浏览器的标准赶不上开发者的脑洞
产物质量：代码需要压缩，兼容性
开发效率：立刻看到更新效果
前段构建工具的意义 模块化方案 提供模块加载方案，兼容不同模块规范
语法转译 高级语法转译Sass 资源加载，如图片
产物质量 产物压缩，无用代码删除，语法降级
开发效率 热更新
Vite是什么，为什么使用？
两大组成部分：No-bundle开发服务，源文件无需打包
生产环境基于Rollup的Bundler
核心特征：高性能，dev启动速度和热更新速度非常快
简单易用，开发者体验好
缓慢的启动 项目编译等待成本高
缓慢地热更新 修改代码后不能实时更新
两大行业趋势
1.全球浏览器对原生ESM的普遍支持
2.基于原生语言编写前端编译工具链，如Go语言编写的Esbuild,Rust编写的SWC
1. 两大要素：script标签增加type=”module”属性
使用ESM模块导入导出语法
在script语句通过import引入.js可以把他当成一个模块，浏览器在发现import模块后会发起请求，解释出导出from字段，在浏览器中可以看到foo内容是可以被打印出来的，在标签中编写ESM的语法
基于浏览器的功能vite开发
1.基于原生ESM的开发服务优势 无需打包项目源代码 天然的按需加载 可以利用文件级的浏览器缓存 2.基于Esbuild的编译性能优化 Esbuild——基于golang开发的前端工具，具备能力：打包器、编译器、压缩器。
个人感悟：vite是一个可以快速启动、高效开发：配置简洁、插件化的新一代前端构建工具。
