这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天

前端工程的痛点：

• 模块化
• 资源编译
• 产物质量
• 开发效率

前端构建工具的意义：

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

Vite概览

• 新一代前端构建工具
• 两大组成部分
  • No-bundle开发服务和生产环境基于rollup的bundler组成
  • 高性能+简单易用
• 核心特征
  • 高性能，dev启动速度和热更新速度非常快
  • 简单易用，开发者体验好
• 当下webpack、rollup的问题
  • 缓慢的启动
    • 项目编译等待成本高
  • 缓慢的热更新
    • 修改代码后不能实时更新

两大行业趋势

• 全球浏览器对原生ESM普遍支持：
• esbuild
  • 基于原生语言（GO,Rust)编写前端编译工具链
  • 基于Go语言编写的Esbuild,Rust编写的SWC

浏览器原生ESM支持

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

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

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

基于Esbuild的编译性能优化：

• Esbuild基于golang开发的前端工具，具备打包器+编译器+压缩器 - 打包器 Bundler - 编译器 Transformer - 压缩器 Minifier
• 性能极高，在vite中被深度使用

vite上手使用

• 提前安装pnpm npm i -g pnpm
• 初始化命令 pnpm create vite
• 安装依赖 pnpm install
• 启动项目 npm run dev

生产环境：

• 基于ESM的import/export语句依赖关系，与运行时状态无关
• 在构建阶段未使用到的代码进行删除
• tree shaking会默认自动开启

Vite整体架构

• 避免node_modules过多的文件请求
• 将commonJS格式转换为ESM格式

实现原理：

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

总结：

这次课使我对前端构建工具有了初步的了解，想要完全掌握还需要继续深入学习，获益匪浅