前端构建工具用得好,构建速度提升 10 倍

今天来盘点一下前端构建工具。

Turbopack

Turbopack,由Vercel开源,是下一代高性能的JavaScript应用构建工具,目前用于 Next.js 中。Turbopack旨在通过革新JavaScript应用的打包流程来显著提升应用性能,它专注于缩短加载时间,降低CPU和网络资源的使用,并减小应用的体积和启动时间。

Vercel 宣称 Turbopack 是 Webpack 的继任者,用 Rust 编写,其在大型应用中的表现令人瞩目,展现了相较于Vite快10倍、相较于Webpack快达700倍的速度。

Turbopack颠覆了传统JavaScript打包工具(如webpack、Rollup)的使用体验,它无需用户手动创建复杂的配置文件或处理繁琐的插件和依赖关系。相反,它通过智能分析应用并自动检测运行时所需特性,来精准确定依赖项,并使用高效的JavaScript模块打包器Rollup进行打包。

Rollup

Rollup是一个JavaScript模块打包器,可以将JavaScript模块打包成单个文件。与其他打包工具相比,Rollup更加注重ES6模块的支持,可以将ES6模块转换成ES5模块,并可以进行tree-shaking优化,减小打包后文件的体积。Rollup 的目标是产生更小、更快、更高效的代码,因此在构建 JavaScript 库时非常有用。

Nx

Nx 是一个具有内置工具和高级 CI 功能的构建系统。它可以在本地和 CI 上维护和扩展 monorepos。

Nx 的核心功能包括:高效并行执行任务并依据依赖关系智能排序,通过在多台虚拟机间分发任务以优化大型仓库的CI性能,利用本地和远程缓存机制避免重复执行,自动拆分大型端到端测试并智能识别重跑不稳定的测试,支持通过插件实现代码库和依赖项的自动更新,以及提供高度的可定制性和可扩展性,允许用户创建并分享自定义插件以满足特定需求。

Rspack

Rspack 是由字节跳动 Web Infra 团队孵化的基于 Rust 语言开发的 Web 构建工具。它拥有高性能、兼容 Webpack 生态、定制性强等多种优点,旨在打造高性能的前端工具链。

JNPF

一个轻量级的低代码开发平台,立足于低代码开发技术,采用主流的两大技术Java/.Net开发,专注低代码开发,有拖拽式的代码生成器,灵活的权限配置、SaaS服务,强大的接口对接,随心可变的工作流引擎。支持多端协同操作,100%提供源码,支持多种云环境部署、本地部署。

开源地址:https://www.yinmaisoft.com

基于代码生成器,可一站式开发多端使用Web、Android、IOS、微信小程序。代码自动生成后可以下载本地,进行二次开发,有效提高整体开发效。像"乐高"一样设计你的门户,依然是拖拽式开发,可一站式搭建:生产管理系统、项目管理系统、进销存管理系统、OA办公系统、人事财务等等。可以节省开发人员80%时间成本,并且有以构建业务流程、逻辑和数据模型等所需的功能。

Rolldown

Rolldown 是 Vue 团队近期开源的一个用 Rust 编写的 JavaScript 打包器,它提供了与 Rollup 兼容的 API 和插件接口,但在功能范围上与 esbuild 更相似。

Rolldown 旨在作为 Vite 未来使用的底层打包器,以替换现在的 Rollup,也可以作为单独的构建工具使用,目前处于开发阶段,尚不可用于生产环境。

Farm

Farm 是国内个人开发者开发的一个使用 Rust 编写的极速 Web 构建工具,兼容 Vite 插件生态。Farm 设计为极速、强大、一致的构建工具,旨在提供更好的 web 开发体验,是真正意义的下一代构建工具。

Rsbuild

Rsbuild 是基于 Rspack 的 Web 构建工具,是一个增强版的 Rspack CLI,更易用、更开箱即用。作为 Rspack 团队对 Web 构建最佳实践的探索,Rsbuild 提供从 Webpack 到 Rspack 的顺畅迁移方案,大幅减少配置需求,提升构建速度达 10 倍。

相关推荐
茶卡盐佑星_2 分钟前
说说你对es6中promise的理解?
前端·ecmascript·es6
Манго нектар30 分钟前
JavaScript for循环语句
开发语言·前端·javascript
蒲公英100137 分钟前
vue3学习:axios输入城市名称查询该城市天气
前端·vue.js·学习
天涯学馆1 小时前
Deno与Secure TypeScript:安全的后端开发
前端·typescript·deno
以对_1 小时前
uview表单校验不生效问题
前端·uni-app
程序猿小D2 小时前
第二百六十七节 JPA教程 - JPA查询AND条件示例
java·开发语言·前端·数据库·windows·python·jpa
奔跑吧邓邓子2 小时前
npm包管理深度探索:从基础到进阶全面教程!
前端·npm·node.js
前端李易安3 小时前
ajax的原理,使用场景以及如何实现
前端·ajax·okhttp
汪子熙3 小时前
Angular 服务器端应用 ng-state tag 的作用介绍
前端·javascript·angular.js
Envyᥫᩣ3 小时前
《ASP.NET Web Forms 实现视频点赞功能的完整示例》
前端·asp.net·音视频·视频点赞