这是我参与「第四届青训营 」笔记创作活动的第十天
1. 关于前端构建工具
1.1 目前前端开发中的一些痛点
1.2 前端构建工具的意义
1.3 当下构建工具的一些问题
- 缓慢的启动-->项目编译等待成本高
- 缓慢的热更新-->修改代码之后不能实时更新
瓶颈
- bundle（打包 ）带来的性能开销
- JavaScript语言的性能瓶颈
1.4 目前的发展趋势
1. 浏览器原生esm支持
2. 认识Vite
2.1 认识Vite
Vite是新一代的前端构建工具
- 高性能，dev启动速度非常快和热更新素服非常快
- 简单易用，开发者体验好
基于原生的ESM开发服务
基于Esbuild编译性能优化
内置的web构建能力
配置简单
3. 使用Vite
3.1 项目初始化
3.2 使用sass/scss & css Modules
3.3 使用静态资源
生产环境TreeShaking
总之 Vite非常的厉害！！！
- 响应迅速
- 开箱即用
4. Vite整体架构
关于依赖预打包
单文件编译
代码压缩
插件机制
5. Vite进阶路线
依赖的双引擎
- 先根据官方文档学习，尝试自己各种配置
- 然后再学习其插件开发
6. Vite插件开发
为什么需要插件机制呢：
- 抽离核心逻辑
- 易于扩展
Vite插件的一些钩子函数
case
开发插件的步骤：
- 开发Vite插件
- 配置文件引入插件
一些参考资料
7. 一些别的东西
7.1 代码分割（拆包）
在拆包之前，会存在一些问题
- 无法进行并发请求
- 缓存复用率低
7.2 js编译工具（Babel）
出现的原因：
- JavaScript语法标准繁多，浏览器支持程度不一
- 开发者需要用到高级语法
7.3 语法安全降级
7.4 服务端渲染（SSR）
7.5 底层标准
8. Vite社区生态
\
