构建工具

前端项目构建和打包工具。

现代构建工具

Vite

• 简介: 下一代前端构建工具
• 链接: https://vitejs.dev/
• 特点:
  • 极速的开发服务器
  • 基于 ESM 的 HMR
  • 开箱即用的 TypeScript 支持
  • 优化的生产构建

Turbopack

• 简介: Webpack 的继任者
• 链接: https://turbo.build/pack
• 特点:
  • Rust 编写，速度极快
  • 增量计算
  • Next.js 内置支持

esbuild

• 简介: 极快的 JavaScript 打包器
• 链接: https://esbuild.github.io/
• 特点:
  • Go 编写，速度惊人
  • 支持 TypeScript、JSX
  • API 简洁

Rspack

• 简介: 基于 Rust 的高性能构建工具
• 链接: https://www.rspack.dev/
• 特点:
  • 与 Webpack 兼容
  • 性能优异
  • 字节跳动开源

传统构建工具

Webpack

• 简介: 模块打包器
• 链接: https://webpack.js.org/
• 特点:
  • 功能强大
  • 生态成熟
  • 高度可配置
  • 插件丰富

Rollup

• 简介: ES 模块打包器
• 链接: https://rollupjs.org/
• 特点:
  • Tree-shaking 优秀
  • 适合库开发
  • 输出代码简洁
  • 插件系统灵活

Parcel

• 简介: 零配置打包工具
• 链接: https://parceljs.org/
• 特点:
  • 零配置
  • 快速构建
  • 自动安装依赖
  • 多核编译

任务运行器

Gulp

• 简介: 自动化构建工具
• 链接: https://gulpjs.com/
• 特点:
  • 基于流的构建
  • 插件丰富
  • 配置灵活

Grunt

• 简介: JavaScript 任务运行器
• 链接: https://gruntjs.com/
• 特点:
  • 配置驱动
  • 插件生态成熟
  • 社区活跃

模块打包

Browserify

• 简介: 浏览器端的 Node.js 模块
• 链接: https://browserify.org/
• 特点:
  • 使用 Node.js 模块
  • 转换插件丰富

构建优化

Terser

• 简介: JavaScript 压缩工具
• 链接: https://terser.org/
• 特点:
  • ES6+ 支持
  • 源码映射
  • 可配置

SWC

• 简介: Rust 编写的 JavaScript/TypeScript 编译器
• 链接: https://swc.rs/
• 特点:
  • 速度极快
  • Babel 替代品
  • 压缩和转译

Babel

• 简介: JavaScript 编译器
• 链接: https://babeljs.io/
• 特点:
  • 转译 ES6+
  • 插件系统
  • Polyfill 支持

代码分割

loadable-components

• 简介: React 代码分割库
• 链接: https://loadable-components.com/
• 特点:
  • SSR 支持
  • 预加载
  • 错误边界

构建分析

webpack-bundle-analyzer

• 简介: Webpack 包分析工具
• 链接: https://github.com/webpack-contrib/webpack-bundle-analyzer
• 特点:
  • 可视化包大小
  • 交互式树状图
  • 找出大文件

source-map-explorer

• 简介: 通过源码映射分析包大小
• 链接: https://github.com/danvk/source-map-explorer
• 特点:
  • 分析打包后的文件
  • 可视化展示
  • 工具无关

Monorepo 工具

Turborepo

• 简介: 高性能 Monorepo 构建系统
• 链接: https://turbo.build/repo
• 特点:
  • 增量构建
  • 远程缓存
  • 并行执行

Nx

• 简介: 智能 Monorepo 工具
• 链接: https://nx.dev/
• 特点:
  • 依赖图分析
  • 增量构建
  • 代码生成器