这是我参与【第五届青训营】伴学笔记创作活动的第15天。

浅谈构建工具

• 模块化：ESM、CommonJS、UMD
  方案

    1. 提供模块加载方案	
    
    2. 兼容不同模块规范	
  

• 资源编译：高级语法的编译
  语法转译

    1. 高级语法转译，如 Sass、TypeScript
    2.资源加载，如图片、字体、worker
  

• 产物质量：代码体积、代码性能
  产物压缩、无用代码删除、语法降级

• 开发效率：热更新

Vite 概要介绍

定位: 新一代前端构建工具 两大组成部分:

1. No-bundle 开发服务，源文件无需打包
2. 生产环境基于 Rollup 的 Bundler

核心特征

1. 高性能，dev 启动速度和热更新速度非常快!
2. 简单易用，开发者体验好

浏览器原生ESM支持

两大要素:

1. script 标签增加 type="module" 属性
2. 使用 ESM 模块导入导出语法

ESM优势

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

Esbuild --基于 Golang 开发的前端工具，具备如下能力

1. 打包器 Bundler
2. 编译器 Transformer
3. 压缩器 Minifier 性能极高，在 Vite 中被深度使用

Vite 上手实战

优化原理:

1. 基于 ESM 的 import/export 语句依赖关系，与运行时状态无关
2. 在构建阶段将未使用到的代码进行删除

Tree Shaking 在 Vite 中无需配置，默认开启!

Vite 整体架构

关键技术:依赖预打包

?为什么要进行预打包?

1. 避免 node_modules 过多的文件请求
2. 将 CommonJS 格式转换为 ESM 格式

实现原理:

1. 服务启动前扫描代码中用到的依赖
2. 用 Esbuild 对依赖代码进行预打包
3. 改写 import 语句，指定依赖为预构建产物路径

关键技术:单文件编译

• 用 Esbuild 编译 TS/JSX

• 优势:编译速度提升 10-100x

• 局限性:

1. 不支持类型检查
2. 不支持语法降级到 ES5

Vite 进阶路线

Vite 插件开发

1. 服务启动阶段
2. 请求响应阶段
3. 热更新阶段
4. 服务关闭阶段

推荐学习顺序

• 先了解基本使用，动手尝试各项常用配置
• 然后学习其插件开发