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

浅谈构建工具

为什么需要构建工具

前端工程化问题

• 模块化
  • ESM、CommonJS、UMD
• 资源编译
  • 高级语法的编译
• 产物质量
  • 代码体积、代码性能
• 开发效率
  • 热更新

前端构建工具的意义

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

Vite 概要介绍

Vite 概览

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

Vite 上手实战

项目初始化

安装启动

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

输入初始化参数

启动

使用 Sass/Scss & CSS Modules

目录结构

使用

安装 Sass

pnpm i sass -D

index.tsx

import styles from './index.module.scss';
//使用 CSS Modules 模块化方案，防止 className 命名冲突
export function Header() {
  return <p className={styles.header}>This is Header</p>
};

index.module.scss

.header {
  color: red;
}

引入 Header 组件

结果：

使用静态资源

以 svg 图片为例：

Vite 整体架构

关键技术

依赖预打包

为什么要进行预打包?

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

实现原理

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

单文件翻译

用 Esbuild 编译 TS/JSX

优势

编译速度提升 10-100x

局限性

• 不支持类型检查
• 不支持语法降级到 ES5

代码压缩

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

压缩性能对比

插件机制

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

参考文档

Rollup 官方文档

Vite 插件开发文档

babel 官方站点

babel 插件手册

Vite 官方降级插件文档