这是我参与「第四届青训营 」笔记创作活动的第五天

vite简介

构建工具

为什么需要构建工具：

• 前端所需资源过多
• 没有统一的模块化方案
• 资源边缘问题
• 产物质量
• 开发效率

构建工具意义：

• 提供模块化方案与兼容不同模块方案
• 高级语法转译与资源加载
• 提高产物质量
• 照顾开发效率

什么是vite

定位： 新一代构建工具

两大组成部分：

• no-bundle
• 基于rollup的bundler

核心特征：

• 高性能(相比webpack要快了不少)
• 简单易用

传统构建器的问题：

• 启动缓慢
• 热更新缓慢
• 瓶颈：bundle与js的性能开销

行业趋势：

• 浏览器支持原生ESM
• 基于原生语言的前端编译链（Go，Rust）

利用ESM的优势：

• 无需打包项目源代码
• 按需加载
• 可以利用文件级的浏览器缓存

编译优势：

• esbuild非常快（谁用谁知道）
• 集成度很高，配置文件小（写过webpack配置文件的都知道）

使用

0. 项目初始化
1. 利用CLI进行配置
2. 引入依赖
3. 进行编码
4. 使用静态资源
5. 生成环境用不到的代码会被优化

vite的关键技术：

0. 预打包

   0. why：

      0. 避免node_modules
      1. 将CommonJS转换为ESM

   1. 原理：

      0. 开始前扫描依赖
      1. esbuild预打包
      2. 改写import语句（指定依赖为预构建产物路径）

1. 单文件编译：

   0. 优势：编译速度快（非常快）

   1. 劣势：不支持类型检查；不支持语法降级

      所以需要tsc

2. 代码压缩：esbuild构建

3. 插件机制

   0. 开发：模拟rollup
   1. 生产：直接使用

Vite插件：

为什么需要插件机制：

0. 抽离核心逻辑
1. 易于拓展

vite插件开发：

0. 服务启动阶段：

   0. config
   1. configResolved
   2. options
   3. configServer
   4. buildStart

1. 请求响应阶段

   0. transfromIndexHTML
   1. resolveID
   2. load
   3. transform

2. 热更新阶段

   0. handleHotUpdate

3. 服务关闭阶段：

   0. buildEnd
   1. closeBundle

一点拓展：

代码拆包：

未拆包前无法利用浏览器的缓存优势（其实浏览器优化了大量的这一模块，不用太可惜了）

拆包后可以定向更新，只更新变化了的部分

babel：

es6出现后浏览器不支持，但开发者很喜欢，于是就诞生了babel