使用 Babel-plugin-transform-runtime 解决 babel-runtime 性能问题-JavaScript中文网-JavaScript教程资源分享门户

使用 Babel-plugin-transform-runtime 解决 babel-runtime 性能问题

随着前端技术的发展，越来越多的开发者开始使用 Babel 来使其代码能够被各种浏览器支持。然而，使用 Babel-runtime 可能会带来性能问题，这也是需要注意的一个问题。

在 JavaScript 中，因为某些浏览器（比如 Internet Explorer 11）缺少某些新特性，因此我们需要使用 polyfill 去模拟这些特性，然而这通常会对性能产生负面影响。因此，我们使用 babel-runtime 来避免这种问题。

在 babel-runtime 被引入到项目中之后，可以通过 @babel/plugin-transform-runtime 以“沙盒”模式运行代码，并引入程序依赖的所有运行时。这样，可以使代码不受性能损失的困扰，并且会将共享的代码提取到一个单独的模块中。这样一来，就不用每个使用了相同的 API 的模块都引入这一份代码，并且不需要重复的注入代码到不同的模块之中。

安装 Babel-plugin-transform-runtime

在使用 Babel-plugin-transform-runtime 的过程中，我们需要先安装该插件：

npm install --save-dev @babel/plugin-transform-runtime

接下来，我们需要在 babel.config.js（或 .babelrc）中进行配置：

// javascriptcn.com 代码示例
{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false,
        "absoluteRuntime": false,
        "version": "7.0.0-beta.0"
      }
    ]
  ]
}

在上面的配置中，我们采用了默认选项。但是在实际应用中，我们可能需要根据代码的需求进行配置。

其中，helpers 属性确保了 Babel 对我们的代码进行了必要的转换。此外，我们还启用了 regenerator，否则，代码中的 async/await 不会被正确的翻译。最后，由于我们要使用预设中的 @babel/preset-env，在此处我们只需要正确的引用该预设即可。

Babel-plugin-transform-runtime 示例

假设我们有以下代码：

// javascriptcn.com 代码示例
var regeneratorRuntime = require("regenerator-runtime");
    _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
    
function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : { "default": obj };
}

var helloWorld = /*#__PURE__*/function () {
  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
    var greeting;
    return regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            _context.next = 2;
            return Promise.resolve("Hello, world!");

          case 2:
            greeting = _context.sent;
            console.log(greeting);

          case 4:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  }));

  return function helloWorld() {
    return _ref.apply(this, arguments);
  };
}();

helloWorld();

如果我们不使用 Babel-plugin-transform-runtime，那么我们需要引入一系列代码，这对于代码块的编写以及占用浏览器资源会造成不必要的影响。

但是，使用 Babel-plugin-transform-runtime 之后，上面的代码就变成了如下所示的形式：

// javascriptcn.com 代码示例
"use strict";

var _interopRequireDefault2 = require("@babel/runtime/helpers/interopRequireDefault");

var _regenerator = _interopRequireDefault2(require("@babel/runtime/regenerator"));

var _asyncToGenerator2 = _interopRequireDefault2(require("@babel/runtime/helpers/asyncToGenerator"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var helloWorld =
/*#__PURE__*/
(function () {
  var _helloWorld = (0, _asyncToGenerator2.default)(
  /*#__PURE__*/
  _regenerator.default.mark(function _callee() {
    var greeting;
    return _regenerator.default.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            _context.next = 2;
            return Promise.resolve("Hello, world!");

          case 2:
            greeting = _context.sent;
            console.log(greeting);

          case 4:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  }));

  function helloWorld() {
    return _helloWorld.apply(this, arguments);
  }

  return helloWorld;
})();

helloWorld();

这样，我们就可以避免多次复写冗余的代码。

总结

使用 Babel-plugin-transform-runtime 可以大大提高代码的可维护性，避免冗余代码的存在，同时避免了与性能相关的问题。但是在使用之前，你需要了解相关的配置选项，可以根据具体的情况进行手动配置。如果你想在代码中使用一些新的语言特性，使用 Babel-plugins 以及以下 Awesomes 中的其他软件可以帮助你快速的安装新语言的新特性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652f55b67d4982a6eb072468