这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天。
一、前端构建工具的意义
模块化方案：1.提供模块加载方案2.兼容不同模块规范
语法转译：1.高级语法转译，如Sass、TypeScript2.资源加载，如图片、字体、worker
产物质量：产物压缩、无用代码删除、语法降级
开发效率：热更新
二、Vite概览
定位:新一代前端构建工具
两大组成部分:
1.No-bundle开发服务，源文件无需打包
2.生产环境基于Rollup的Bundler
核心特征
1.高性能, dev启动速度和热更新速度非常快!
2.简单易用，开发者体验好
三、两大行业趋势
基于原生语言(Go、Rust)编写前端编译工具链
全球浏览器对原生ESM的普遍支持(目前占比92%%以上)
如Go语言编写的Esbuild、Rust编写的SwC
四、生产原理
优化原理:
1.基于ESM的import/export语句依赖关系，与运行时状态无关
2.在构建阶段将未使用到的代码进行删除
五、为什么要进行预打包
1.避免node_modules过多的文件请求
2.将CommonJS格式转换为ESM格式
六、实现原理:
1.服务启动前扫描代码中用到的依赖
2.用Esbuild对依赖代码进行预打包
3.改写import语句,指定依赖为预构建产物路径
七、单文件编译
优势:编译速度提升10-100 x
局限性:
1. 不支持类型检查
2. 不支持语法降级到ES5
八、Babel出现原因：
1. JavaScript语法标准繁多,浏览器支持程度不一
2. 开发者需要用到高级语法
九、服务端渲染（SSR） —种常见的渲染模式,用于提升首屏性能和SEO优化。 —种常见的渲染模式,用于提升首屏性能和SEO优化。
