这是我参与「第四届青训营 」笔记创作活动的的第12天
浅谈构建工具
前端构建工具的意义
- 模块化：提供模块加载方案，兼容不同模块规范
- 语法转译：高级语法转译，若sass、typescript，资源加载，如图片、字体、worker
- 产物质量：产物压缩、无用代码删除、语法降级
- 开发效率：热更新
当下存在的问题
缓慢的启动：项目编译等待成本高
缓慢的热更新：修改代码后不能实时更新
瓶颈:
- bundle带来的性能开销
- JavaScript语言的性能瓶颈
两大行业趋势
- 全球游览器对原生ESM的普遍支持
- 基于原生语言（Go、Rust）编写前端编译工具链，如Go语言编写的Esbuild、Rust编写的SWC
基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级游览器缓存
基于Esbuild的编译性能优化
基于Go开发的前端工具，Esbuild具有一下能力
- 打包器Bundler
- 编译器Transformer
- 压缩器Minifier
特点:性能极高，在vite中被深度使用。
vite概要介绍
简介
vite是面向现代浏览器的web应用开发工具,由于浏览器开始原生支持ES模块，越来越多的javascript工具使用编译型语言编写，而vite的出现就是为了解决webpack在开发阶段使用webpack-dev-server启动时冷却时间过长以及在热更新时使用webpack-hmr反应较慢问题
命令
- 首先进入vite：
npm create vite - 然后选择需要的配置即可。
- 进入项目后，需要下载依赖：
npm install - 这样就可以启动项目了:
npm run dev
vite上手实战
特点
- 热更新时之前的状态会保存，只会更新修改的部分。
- 生产环境Tree Shaking使得代码能够去掉冗余部分，优化的原理是基于ESM的import/export语句依赖关系，与运行时状态无关，在构建阶段未使用到的代码进行删除。
注意：Tree Shaking 在vite中无需配置，默认开启。
vite的直观映像
- 响应迅速
- 开箱即用
vite整体架构
关键技术：依赖预打包
为什么要进行预打包
- 避免node_modules过多的文件请求
- 将CommonJS格式转换为ESM格式
实现原理
- 服务器启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写import语句，指定依赖为预构建产物路径
关键技术：单文件编译
用Esbuild编译TS/JSX
优势：编译速度提升10-100倍
局限：不支持类型检查，不支持语法降级到ES5
关键技术：代码压缩
Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具。
关键技术：插件机制
开发环境：模拟Rollup插件机制
生产环境：直接使用Rollup
vite进阶路线
深入双引擎
- Esbuild：esbuild - An extremely fast JavaScript bundler
- Rollup：简介 | rollup.js 中文文档 | rollup.js 中文网 (rollupjs.com)
推荐学习顺序：先了解基本用法，动手尝试各项常用配置，然后学习其插件开发。
vite的插件开发
为什么需要插件机制：
- 抽离核心逻辑
- 易于扩展
