这是我参与「第四届青训营 」笔记创作活动的第3天
浅谈构建工具
前端的核心要素（资源）： JS TS JSX CSS SCSS LESS PNG JPEG WEBP等
前端的痛点
模块化：把项目拆为不同的模块，分别进行开发和维护 --> 规范：ESM、CommonJS、UMD
资源编译：浏览器的标准远远赶不上前端开发人员的脑洞，前端开发人员创造了非常多的语法特性、语法糖、工具来提高开发者的体验，但是浏览器并不支持高级语法
产物质量：线上代码需要压缩、优化产物体积，代码性能方面，有一些兼容性问题
开发效率：热更新
前端构建工具的意义
模块化方案： 1) 提供模块加载方案 2) 兼容不同模块规范
语法转译：1) 高级语法转译，如 Sass、TypeScript 2) 资源加载，如图片、字体、worker
产物质量： 产物压缩、无用代码删除、语法降级
开发效率： 热更新
Vite是什么？WhyVite？
定位:新一代前端构建工具
两大组成部分:
- No-bundle 开发服务，源文件无需打包
- 生产环境基于 Rollup 的 Bundler
核心特征：
- 高性能，dev 启动速度和热更新速度非常快!
- 简单易用，开发者体验好
当下问题：
- 缓慢的启动：项目编译等待成本高
- 缓慢的热更新：修改代码后不能实时更新
两大行业趋势：
- 全球浏览器对原生ESM的普遍支持（目前占比92%以上）
- 基于原生语言（Go、Rust）编写前端编译工具链
Vite上手使用
项目初始化：启动完成后，打开浏览器
使用Sass/Scss & CSS Modules
使用静态资源
除了常见的图片格式，Vite也内置了对于JSON、Worker、WASM资源的加载支持
生态环境Tree Shaking
优化原理：
- 基于 ESM 的 import/export 语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
Tree Shaking 在 Vite 中无需配置，默认开启!
Vite 整体架构
关键技术：依赖预打包
为什么要进行预打包?
- 避免 node modules 过多的文件请求
- 将 CommonJS 格式转换为 ESM 格式
实现原理:
- 服务启动前扫描代码中用到的依赖
- 用 Esbuild 对依赖代码进行预打包
- 改写 import 语句，指定依赖为预构建产物路径
关键技术：单文件编译
用Esbuild 编译 TS/JSX
优势:编译速度提升 10-100 x
局限性:
- 不支持类型检查
- 不支持语法降级到 ES5
关键技术：代码压缩
Esbuild 作为默认压缩工具，替换传统的 Terser、Uglify.js 等压缩工具
关键技术：插件机制
开发阶段 -> 模拟 Rollup 插件机制
生产环境 -> 直接使用 Rollup
插件兼容性具体可查阅 vite-rollup-plugins.patak.dev/
