这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天
构建工具产生原因
前端工程的痛点
- 模块化：ESM、CommonJS、UMD
- 资源编译：高级语法的编译
- 产物质量：代码体积、代码性能
- 开发效率：热更新
前端构建工具的意义
- 模块化方案
- 提供模块加载方案
- 兼容不同模块规范
- 语法转译
- 高级语法转译
- 资源加载
- 产物质量
- 产物压缩
- 无用代码删除
- 语法降级
- 开发效率
- 热更新
Vite概览
定位：新一代前端构建工具
两大组成：
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler
核心特征：
- 高性能，dev启动速度和热更新速度非常快
- 简单易用，开发者体验好
瓶颈：
- bundle带来的性能开销
- JavaScript语言的性能瓶颈
优势：
- 基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
- 基于Esbuild的编译性能优化
使用
# 提前安装 pnpm
npm i -g pnpm
# 初始化命令
pnpm create vite
# 安装依赖
pnpm install
# 启动项目
npm run dev
使用HMR：无需额外的配置，自动开启
生产环境Tree Shaking:
- 基于ESM的import/export语句依赖关系，与运行时状态无关
- 在构建阶段将未使用的代码进行删除
注Tree Shaking在Vite中无需配置，默认开启
整体架构
依赖预打包
原因：
- 避免node_moudles过多的文件请求
- 将COmmonJs格式转换为ESM格式
实现原理：
- 服务器启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行滚预打包
- 改写import语句，指定依赖为预构建产物路径
//改写前
import React from "react";
//改写后
import React from '/node_modules/.vite/react.js'
单文件编译
用Esbuild编译TS/JSX
优势：编译速度提升10-100 x
局限性：
- 不支持类型检查
- 不支持语法降级到ES5
代码压缩
Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具
插件机制
开发阶段->模拟Rollup插件机制
生产环境->直接使用Rollup
进阶路线
- 深入双引擎：esbuild，rollup.js
- Vite插件开发
- 代码分割
- 拆包前：
- 拆包后：
- JS编译工具（Babel）
- 语法安全降级
- 服务器端渲染（SSR）
- 了解底层标准
- Vite社区生态
