这是我参与「第五届青训营 」笔记创作活动的第13天
为什么需要构建工具
模块化（ESM CommonJS UMD）->提供模块加载方案，兼容不同模块规范
资源编译（高级语法的编译）->高级语法转译，资源加载 如图片字体worker
产物质量（代码体积，代码性能）->产物压缩，无用代码删除，语法降级
开发效率（热更新）
Vite是什么
新一代前端构建工具
两大组成部分
- No-bundle开发服务，源文件不需要打包
- 生产环境基于Rollup的Bundler
核心特征
- 高性能，dev启动速度和热更新速度非常快
- 简单易用，开发者体验好
当下问题
- 缓慢的启动 项目编译等待成本高
- 缓慢的热更新 修改代码后不能实时更新
基于原生ESM的开发服务优势
html中script标签增加type=“module”
Vite Dev Server，无需打包项目源代码，天然的按需加载，可以利用文件级的浏览器缓存。
基于Esbuild的编译性能优化
Esbuild是基于go开发的前端工具，具备打包器bundler、编译器Transformer、压缩器Minifier。
优势：编译速度提升
局限性：不支持类型检查，要加入额外的工具esc，不支持语法降级到es5
如何使用Vite
生产环境Tree-shaking
- 基于ESM的import/export语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
Tree-shaking无需配置，默认开启。
插件机制
开发阶段：模拟Rollup插件机制
生产环境：直接使用Rollup
Vite进阶路线
esbuild + rollup
为什么需要插件机制
抽离核心逻辑，易于拓展。
通过上述Hook，可以在不同构建阶段插入自定义的逻辑。
代码分割（拆包）
以前的前端工程只有一个产物文件，无法进行并发请求，缓存复用率低。
JS编译工具Babel
JS语法标准繁多，浏览器支持程度不一，开发者需要用到高级语法。
语法安全降级
服务端渲染SSR
一种常见的渲染模式，用于提升首屏性能和SEO优化。
