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

1 浅谈构建工具

为什么需要构建工具？

• 前端工程化的痛点
  • 语法规范：ESM、CommonJS、UMD，无法进行统一
  • 浏览器的解析标准无法满足开发者的需求，一系列的ts、jsx文件等等
  • 线上代码需要压缩，对未使用的资源需要进行优化，需要兼容IOS9、Android 4.4
• 前端构建工具的意义

2 Vite概要介绍

什么是Vite

• 定位：新一代前端构建工具，包括两大部分
  • No-bundle开发服务，源文件无需打包
  • 生产环境基于Rollup的Bundler
• 核心特性：
  • 高性能，dev启动速度和热更新速度非常快
  • 简单易用，开发者体验好
• 当下问题
• 两大行业趋势
  • 全球浏览器对原生ESM的普遍支持（目前占比92%以上）
  • 基于原生语言（Go、Rust）编写前端编译工具链，如Go语言编写的Esbuild、Rust编写的SWC
• 基于原生ESM的开发服务优势
  • 无需打包项目源码
  • 天然的按需加载
  • 可以利用文件级的浏览器缓存
• 基于Esbuild的编译性能优化
• 内置的web构建能力

3 上手实践

• 项目提前安装node.js
• 使用Sass/Scss&CSS Modules

4 Vite整体架构

• 开发与生产阶段
• 为什么要进行预打包
  • 避免node_modules过多的文件请求
  • 将CommonJS格式转换为ESM格式
• 实现原理
  • 服务启动前扫描代码中用到的依赖
  • 用Esbuild对依赖代码进行预打包
  • 改写import语句，指定依赖为预构建产物路径