构建工具-对比
前言
Webpack作为目前份额最高的构建工具, 占比甚至达到80%以上,但在有些场景之下会显得很臃肿 ,自己的整理对比下其他构建工具的区别,在合适的场景按需选择比较好
其他构建工具对比
| 对比维度 | 特点 | 文件类型支持 | 扩展性 | 适用场景 | 缺点 |
|---|---|---|---|---|---|
| Vite | 基于原生ESM、快速冷启动、Rollup生产打包、HMR高效 | JS/TS/JSX/TSX、CSS、HTML、静态资源等 | 兼容Rollup插件生态、官方插件丰富 | 现代Web应用、SPA/SSR、开发环境高效需求 | 生产需Rollup二次打包、旧浏览器需额外Polyfill |
| Rollup | ESM原生支持、代码精简、插件生态丰富 | JS（需插件扩展其他类型） | 强插件系统（25+生命周期钩子） | 第三方库打包、现代Web应用 | 需配置插件链、低版本浏览器需Polyfill |
| Turbopack | Rust实现、增量编译、自动依赖分析、Next.js集成、Rollup打包优化 | JS/TS/JSX/TSX、CSS/SCSS/LESS、静态资源 | 支持Rollup插件生态、Next.js插件系统 | 超大型应用、Next.js项目、高性能需求场景 | 生态不成熟、调试工具支持有限、文档待完善 |
| Rspack | Rust实现、兼容Webpack配置、内置SWC转译、多线程构建、模块联邦支持 | JS/TS/JSX/TSX、CSS/SCSS/LESS、静态资源、WASM | 兼容Webpack插件、自定义插件系统 | 企业级应用、Webpack迁移项目、多模块并行构建 | 复杂场景需手动优化、社区支持不足 |
| Parcel | 零配置、Rust转译、多核并行 | JS/TS/JSX/TSX、CSS/SCSS/SASS、HTML等 | 内置插件系统（JSON5配置） | 中小型项目、现代浏览器ESM支持 | 扩展性弱、老旧浏览器兼容需处理 |
| Snowpack | Unbundle技术、依赖预处理、Rollup打包 | JS/TS/JSX/TSX（需Babel降级）、CSS等 | 沿用Rollup插件系统 | 快速原型开发、原生ESM项目 | 文档不完善、社区插件生态薄弱 |
| Esbuild | 极致性能、Tree Shaking、内置热重载 | JS/TS/JSX/TSX、JSON、CSS等 | 有限插件（JS Plugin扩展） | 快速转译/压缩、简单业务项目 | 不支持完整ES5转译、Code Splitting不完善 |
| SWC | 高效压缩、Rust实现 | JS/TS/JSX/TSX、CSS等 | 需配合其他工具（如Webpack） | 转译引擎（如Webpack的Loader） | 无完整构建功能、复杂配置支持不足 |
| Farm | Rust实现、极速构建、增量编译、缓存优化、多线程架构 | JS/TS/JSX/TSX、CSS/SCSS/LESS、静态资源、WASM | 自定义插件链、支持Rollup/Vite插件兼容性 | 超大型项目、多模块并行构建、企业级应用 | 生态不成熟、复杂配置需手动优化、调试工具支持有限 |
“其他的”其他构建工具列举
除了上述的常规构建工具，其实业界也出了不少新的构建工具，我为大家列举一些
Mako
开源时间：2024.06
特点
- **大厂开源：**来自阿里蚂蚁前端团队，他们在业界影响力很大，比如UmiJS、AntD。
- **适用性：**适用于Web应用、库和框架。
- **零配置：**从一个JS/TS文件开始，Mako将处理其余部分。开箱即支持TypeScript、Less、CSS、CSS Modules、React、图像、字体、WASM、Node Polyfill等。不需要配置加载器、插件或其他任何东西。
- **快如闪电：**在核心打包逻辑中使用Rust，并在Node.js中使用piscina来并行编译文件。在基准测试中，Mako比其他 Rust打包工具和Webpack更快。
- **热模块替换：**当文件更改时，Mako将自动更新浏览器中的代码。无需手动刷新页面。Mako已集成React快速刷新，当你更改React组件时，它只会更新组件，而不是整个页面。
个别评价
