Babel-runtime 与 Core-js 的性能比较

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

在前端开发领域,为了兼容新旧浏览器,我们经常需要将 ES6+ 的语法转换为 ES5 可执行代码。而 Babel 是当前最流行的 JavaScript 编译工具之一,它提供了一个 runtime 库和插件系统来实现这个目标。在 Babel 的插件系统中,我们经常会用到两个库: Babel-runtime 和 Core-js。本篇文章将对这两个库进行性能比较,分析它们的优劣和应用场景。

Babel-runtime

Babel-runtime 是 Babel 官方推荐使用的 runtime 库。它是一个低级别的库,提供了对一些新的语法的实现,例如 Generator 和 Promise,在转换的代码中会直接引用这些实现库。

-- ------------
----- -------- ------ -
  ----- --- --------------- -- ------------------- -------
  ------------------- ---------
-
-------

经过 Babel 转译后,代码如下所示:

-- ------------
--- --------------- - -----------------------------------------------------
--- ----------------- - -------------------------------------------------------
--- -------- - ----------------------------------------------

-------- ------ -
  ------ ----------------- -----------
-

-------- ------- -
  ----- - -------------------- --------- ---------------------------------- --------- -
    ------ -------------------------------- ------------------ -
      ----- --- -
        ------ -------------- - -------------- -
          ---- --
            ------------- - --
            ------ --- --------
              --------- --------- -
                ------ ------------------- ------
              ---

          ---- --
            ------------------- ---------

          ---- --
          ---- ------
            ------ ----------------
        -
      -
    -- ---------
  ----
  ------ ----------------- -----------
-

-------

可以看到,在 Babel 转换后的代码中,我们引用了一些 Babel-runtime 的模块,例如 @babel/runtime/helpers/esm/classCallCheck@babel/runtime/helpers/esm/asyncToGenerator@babel/runtime/helpers/esm/promise

Babel-runtime 与 Babel 一起使用时,它可以优化编译出的 ECMAScript 代码,但它会在你的项目引入一些额外的运行时依赖。因为 Babel-runtime 中包含了 ES6+ 语法的小部分实现,所以相应的实现函数将运行时注入到你的代码中。这样一来,就必须将 Babel-runtime 添加到应用程序的依赖链中。

然而,对于一些旧浏览器来说,Babel-runtime 会增加代码包的大小,并导致运行速度变慢。而且,每次运行时调用都会产生额外开销。

Core-js

Core-js 与 Babel-runtime 不同,它不是为特定的编译器设计的,它只存储了各种 JavaScript 语法的 polyfill,它与运行环境无关,因此更灵活,可以跨多个浏览器和环境使用,也可以在任意 Web 应用或命令行下使用。

Core-js 提供了大量的 polyfill,涵盖了从 ES3 到 ES2021 的所有 JS 标准,几乎覆盖了所有你用到的 JavaScript 语法。你的项目只需要添加需要的 polyfill 就可以了,从而减少包的大小。

使用 Core-js,我们可以将上面的例子改成这样:

-- ------------
------ -----------------------------
------ --------------------------------------
------ -------------------------------------

----- -------- ------ -
  ----- --- --------------- -- ------------------- -------
  ------------------- ---------
-
-------

这样,在运行时调用时,必须首先加载系统的 polyfill,然后引入了自己的应用程序代码,再次运行时就允许该代码使用自己的 polyfill 运行。

在上面的示例中,我们只添加了 core-js/modules/es.promisecore-js/modules/es.object.to-stringcore-js/modules/es.promise.finally 这三个 polyfill。它们都是 Promise 相关的 polyfill ,只是添加了最基本的支持实现。

通过这种方式,我们可以很方便地自定义项目所需的 polyfill,并且可以更好地控制依赖和打包大小。

性能比较

下面是一个简单的性能基准测试,我们通过命令行分别构建 Babel-runtime 和 Core-js,然后跑一遍基准测试。

-- ------------
-------- ------ -
  ----- --- - -------------------------------
  ------ --------- -- - - ---------------- ----- -- ---- - ------
-
------------------------------
-------
---------------------------------
------------------------
-------
---------------------------

运行上面的代码后,终端输出的结果如下:

-------------- -------
-------- -------

可以看到,Babel-runtime 的执行速度更快。这是因为 Babel-runtime 相对于 Core-js 有更多的 JIT 优化,如果使用了多个不同的 ES6+ 语言特性,则使用 Babel-runtime 可以更加快速地执行。

但是,在实际应用中,我们应该考虑到使用 Babel-runtime 会增加 bundle 大小,而使用 Core-js 可以大幅度减少 bundle 大小。因此,如果我们的应用程序已经占用了大量的代码空间,或者已经使用了许多 polyfill,那么使用 Core-js 是一个明智的选择。

此外,如果你需要更精细的控制,可以使用 @babel/preset-env 对你的代码进行优化。例如,你可以在 @babel/preset-env 中指定需要支持的版本号,并根据需要在代码中引入对应的 polyfill。

结论

总而言之,Babel-runtime 适合规模较小的项目和偏重性能的项目。在大型项目中,使用 Core-js 可以减少打包大小,提高首屏加载速度。根据项目的特点和需求,选择合适的方案可以使您的应用程序更加高效。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/671c4ae09babaf620fb014d2


猜你喜欢

  • 解决 React Native "Invariant Violation: ScrollView child layout" 错误的方法

    在使用 React Native 开发移动应用的过程中,难免会遇到一些错误和问题。其中一个常见的错误就是 "Invariant Violation: ScrollView child layout"。

    15 天前
  • ES12 中优化异步编程的新特性:Promise.any() 方法

    随着 Web 应用程序的复杂性增加,异步编程已经成为现代前端开发的标准之一。异步编程的主要目的是为了避免阻塞应用程序的运行,以及提高用户体验。自 ES6 以来, JavaScript 中引入了 Pro...

    15 天前
  • Photoshop 无障碍 | Photoshop 中无障碍性实践

    在当今的科技时代,人们日益关注无障碍设计和实践。无障碍设计是指以用户为中心,考虑各种人群使用产品的需求,为每个人提供一种友好使用的界面,以实现产品的更加普及和使用的便捷性。

    15 天前
  • Koa2 | 快速搭建电商平台开发环境

    电商平台开发需要一个良好的开发环境,而今天我们将介绍如何用 Koa2 快速搭建一个开发环境。 Koa2 是一个基于 Node.js 平台的 web 开发框架,它的轻量化和精简化的设计能够给予开发者更多...

    15 天前
  • 使用 ES9 的 Regular Expression Lookbehind Assertions 来匹配相邻字符

    正则表达式是编写复杂字符串匹配模式的强大工具,而 ES9 中的 Regular Expression Lookbehind Assertions 则使得正则表达式匹配更加强大和灵活。

    15 天前
  • 如何利用 MongoDB 创建分布式 applications

    如何利用 MongoDB 创建分布式 applications 随着云计算和大数据技术的不断发展,分布式系统已经成为了越来越多企业构建复杂应用程序的首选技术。MongoDB 作为一个开源的 NoSQL...

    15 天前
  • 解决 Socket.io 断开连接后仍然可以发送数据的问题

    在使用 Socket.io 进行实时通信时,可能会遇到一种情况:当客户端与服务器建立连接后,客户端断开连接,但服务器仍然可以向客户端发送数据。这个问题可能会导致一些不必要的麻烦,例如服务器不知道客户端...

    15 天前
  • 如何快速升级 Next.js 版本

    随着前端技术的快速发展,Next.js 作为一款非常流行的 React 框架也在不断更新。如果你正在使用 Next.js,那么升级版本是非常重要的。本文将向您介绍如何快速升级 Next.js 版本,并...

    15 天前
  • Vue.js 中如何使用 computed 属性

    Vue.js 中如何使用 computed 属性 在 Vue.js 中,computed 属性是一种非常有用的特性,它可以让我们轻松地计算出某个属性的值,并将其绑定到模板中展示。

    15 天前
  • Angular 中使用 ngAfterViewInit 来操作视图组件

    Angular 中使用 ngAfterViewInit 来操作视图组件 在 Angular 应用中,除了组件初始化完成时,我们还需要在视图加载完成后才能够进行操作。

    15 天前
  • 使用 ES11 update() 方法更新对象属性时遇到的坑点

    前言 JavaScript 语言不断地更新和进化,为前端开发者提供了更好的开发工具和框架。ES11 的 update() 方法是一个值得关注的新特性,可以让前端开发者更优雅地更新对象属性。

    15 天前
  • CSS Grid 布局与响应式设计

    CSS Grid 是一种用于创建网格布局的 CSS 模块。它提供了一种创建复杂布局的方式,同时具备灵活性和响应式设计的能力。本文将介绍 CSS Grid 布局以及如何使用它进行响应式设计。

    15 天前
  • 使用 Fastify 框架构建 Nest.js 应用程序的方法

    Nest.js 是一个基于 Node.js 平台的快速、可扩展的应用程序框架,它使用了许多标准和现代技术和设计模式。Nest.js 提供了一种简洁的架构、简单的编程形式和强大的模块化机制,可以大大提高...

    15 天前
  • Java 应用程序性能优化的 Best Practices

    介绍 Java 是一种常用的编程语言,被广泛应用于企业应用开发、移动端应用开发、游戏开发等领域。Java 应用程序性能优化是一个重要的话题,它涉及到许多方面,如代码质量、算法复杂度、内存管理、线程安全...

    15 天前
  • Flexbox 布局中的五种 flex-shrink 策略

    在 Flexbox 布局中,flex-shrink 属性指定了弹性盒中一个项目在空间不足时该如何缩小。当容器空间不足以容纳所有项目时,flex-shrink 属性控制每个项目缩小的程度。

    16 天前
  • 是时候学习 Progressive Web App (PWA) 技术了!

    近年来,随着移动设备的普及和技术的进步,Web 应用的使用率不断增加。然而,传统的 Web 应用在某些方面依然存在着劣势,如需要网络连接、页面加载速度较慢等等。因此,为了提供更优秀的用户体验,又兼顾 ...

    16 天前
  • Material Design 中图形的选择、调整和搭配技巧分析

    前言 在设计 UI 时,图形元素是不可缺少的一部分。Material Design 带来了更加直观、连贯和有意义的设计语言,并提供了一系列的设计准则,以协助设计师更好的选用图形元素。

    16 天前
  • 让 Babel 自动挖掘代码中的 ES6 语法

    在现代前端开发中,ES6 已经成为了标配。然而,我们在编写代码时难免会忘记或者忽略某些 ES6 的语法,这就导致了我们的代码在可读性、可维护性、性能优化等方面存在着不足。

    16 天前
  • Hapi.js中的路由优化技巧

    Hapi.js 是一款构建服务端应用程序的框架,它提供了一整套工具和插件,用于管理服务器上的路由、请求和响应。在构建服务器应用时,路由的性能是非常关键的因素之一。本文将介绍 Hapi.js 中的路由优...

    16 天前
  • 如何使用 Enzyme 测试 Redux 中的异步 Action Creator

    Redux 是一个非常流行的状态管理库,而 Enzyme 是一种常用的测试工具,用于测试 React 组件。在编写前端应用程序时,需要使用测试工具来测试 Redux 异步 Action Creator...

    16 天前

相关推荐

    暂无文章