这是我参与⌈第四届青训营⌋笔记创作活动的第16天

一、浅谈构建工具

1、核心要素——资源

JS、TS、JSX、CSS、SCSS、LESS、PNG、JPEG、WEBP....

2、前端构建工具的意义

• 模块化方案——>1.提供模块加载方案；2.兼容不同模块规范。
• 语法转译——>1.高级语法转译，如Sass、TypeScript；2.资源加载，如图片、字体、worker
• 产物质量——>产物压缩、无用代码删除、语法降级；
• 开发效率——>热更新

二、Vite概要介绍

• 定位：新一代前端构建工具
• 两大组成部分：
  1. No-bundle开发服务，源文件无需打包
  2. 生产环境基于Rollup的Bundler
• 核心特征：
  1. 高性能，dev启动速度和热更新速度非常快
  2. 简单易用，开发者体验好

业界案例

当下问题

• 缓慢启动->项目编译等待成本高
• 缓慢的热更新->修改代码后不能实时更新
• 瓶颈在哪里？
  1. bundle带来的性能开销
  2. JavaScript语言的性能瓶颈

两大行业趋势

- 全球浏览器对原生ESM的普遍支持（目前占比92%以上）

- 基于原生语言（Go、Rust）编写前端编译工具链

- 如Go语言编写的Esbuild、Rust编写的SWC

三、Vite实战上手

• 项目初始化

• 使用Sass/Scss & CSS Modules

• 使用Scss & CSS Modules

• 使用静态资源

• 使用HMR

• 生产环境Tree Shaking

四、整体架构

五、Vite进阶路线

• Vite插件开发

• 代码分割

• JS编译工具（Babel）

1. JavaScript语法标准繁多，浏览器支持程度不一
2. 开发者需要用到高级语法

• 语法安全降级

• 服务端渲染