这是我参与「第五届青训营」伴学笔记创作活动的第14天。今天开始了有关Vite方面的学习。

前端构建工具的意义

• 模块化方案
  • 提供模块加载方案
  • 兼容不同规范标准
• 语法转义
  • 高级语法转移，如sass、typescript
  • 资源加载，如图片，字体，worker
• 产物质量
  • 产物压缩、无用代码删除
  • 语法降级
• 开发效率
  • 热更新

什么是Vite

介绍

• 定位:
  • 新一代前端构建工具
• 两大组成部分
  • 1.No-bundle开发服务,源文件无需打包
  • 2.生产环境基于Rollup的 Bundler
• 核心特征
  • 1.高性能,dev启动速度和热更新速度非常快!
  • 2.简单易用，开发者体验好

当下问题

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

• bundle带来的性能开销
• JavaScript语言的性能瓶颈

两大行业趋势

• 全球浏览器对原生ESM的普遍支持
  • script标签增加type='module'属性
  • 使用ESM模块导入导出语法
• 基于原生语言编写前端编译工具链（GO->Esbuild Rust->SWC）
  • Esbuild（打包器Bundler、编译器Transformer、压缩器Minifier）

使用Vite

项目初始化

使用Sass/Scss&CSS Modules

使用静态资源文件

整体框架

依赖预打包

为什么要进行依赖预打包

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

实现原理

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

单文件编译

用Esbuild编译TS/JSX

• 优势：
  • 编译速度提升10-100x
• 局限性：
  • 不支持类型检查
  • 不支持语法降级到ES5

代码压缩

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

插件机制

• 开发阶段->模拟Rollup插件机制
• 生产环境->直接使用Rollup

进阶学习

深入双引擎

• Esbuild
• rollup.js

Vite插件开发

代码分割（拆包）

解决无法进行并发请求、缓存复用率低的问题

JS编译工具（Babel）

• JS语法标准繁多，浏览器支持程度不一
• 开发者需要用到高级语法

语法安全降级

服务端渲染（SSR）

深入了解底层标准

重要特性：

• CJS
• ESM
• HTTP 2.0

个人小结

Vite响应迅速、开箱即用，性能优秀，对前端构建意义重大。