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

Vite知识体系

为什么需要构建工具

模块化——ESM、CommonJS、UMD

资源编译——高级语法的编译

产物质量——代码体积、代码性能

开发效率——热更新

前端构建工具的意义

模块化方案

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

语义转换

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

产物质量

产物压缩、无用代码删除、语法降级

开发效率

热更新

什么是Vite?

定位：新一代前端构建工具

两大组成部分：

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

核心特征

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

当下的问题及瓶颈

当下问题

1. 缓慢的启动——>项目编译等待成本高
2. 缓慢的热更新——>修改代码后不能实时更新

瓶颈在哪里

bundle（打包的过程）带来的性能开销

JavaScript语言的性能瓶颈

基于原生ESM的开发服务优势

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

基于Esbuild的编译性能优化

Esbulid——基于Golang开发的前端工具，具备如下能力：

1. 打包器 Bundler
2. 编译器 Transformer
3. 压缩器 Minifier

性能性极高，在Vite中被深度使用

内置的web构建能力

Vite上手使用

项目初始化

使用Sass/Scss & CSS Modules

使用Scss & CSS Modules

使用静态资源

Vite整体架构

关键技术：依赖预打包

为什么要进行预打包？

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

实现原理：

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

关键技术：单文件编译

关键技术：代码压缩

Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具

关键技术：插件机制