详解polyfills如何按需加载及场景示例详解

时间:2023-03-20 为了摸鱼而战人气:0

前言

青铜时代

最使前端头痛的问题，莫过于浏览器兼容性，无论是js，还是css都要考虑浏览器兼容性问题，在webpack出来之前，这无非是一个非常头疼的问题，查到一个兼容性问题，查找很多资料，解决一下，再出来一个问题又要花很长时间解决一下，这无疑要花费很长时间，这无疑浪费了宝贵的摸鱼时间。

火枪时代

webpack出来之后，效率提高几倍，但是有一个问题就是配置复杂，可能有的朋友包括我在内，到现在也没弄懂 @babel/preset-env,@babel/polyfills, @babel/plugin-transform-runtime的区别，以及如何配置才是最优解

webpack添加babel-loader

首先安装@babel/core,@babel/cli,babel-loader包

index.js 内容

const fn = () => {
  console.log('ws');
}
const array = [1, 2, 3, 4];
array.includes(1);

package.json 编译·

  "scripts": {
    "build": "babel src --out-dir build"
  },

然后进行编译

const fn = () => {
  console.log('ws');
};
const array = [1, 2, 3, 4];
array.includes(1);

发现和我代码几乎一样，没有啥改变

在加入plugins测试之前我们需要知道一些前置知识，babel将ECMAScript 2015+ 版本的代码分为了两种情况处理：

语法层： let、const、class、箭头函数等，这些需要在构建时进行转译，是指在语法层面上的转译
api方法层：Promise、includes、map等，这些是在全局或者Object、Array等的原型上新增的方法，它们可以由相应es5的方式重新定义

babel对这两种情况的转译是不一样的，我们需要给出相应的配置。

@babel/preset-env

@babel/preset-env 是把语法转化为当前浏览器能够理解的代码, 注意只是语法层面哦

安装@babel/preset-env还需要在babel.config.js中进行一下配置

module.exports = {
  presets: ["@babel/preset-env"]
}

然后我们看一下打印结果

"use strict";
var fn = function fn() {
  console.log('ws');
};
var array = [1, 2, 3, 4];
array.includes(1);

箭头函数已经进行了转化，因为箭头函数是语法层面的

@babel/polyfill

@babel/polyfill是把api转化为当前浏览器能够理解的代码,此处是转化的api

库的使用需要在index.js中引入@babel/polyfill

import "@babel/polyfill";
const fn = () => {
  console.log('ws');
}
const array = [1, 2, 3, 4];
array.includes(1);

编译后发现我们的代码没啥变化，但是确把@babel/polyfill都引了过来，要知道@babel/polyfill是非常大的，包括所有的api，这无疑会使打包体积变大很多

"use strict";
require("@babel/polyfill");
var fn = function fn() {
  console.log('ws');
};
var array = [1, 2, 3, 4];
array.includes(1);

这就不是我们想要的，我们只想要array.includes方法呀，我们需要按需加载，而不是加载这么多代码

别慌，接下来就会讲到

配置 useBuiltIns

为了解决polyfill按需加载的问题, @babel/preset-env集成了polyfill,并且可以通过配置useBuildIns的方式实现按需加载

corejs 也要同时配置，2 的版本可以处理全局对象，但实例方法并不处理，所以这里用 3 的版本。

npm install core-js@3

usage 会根据配置的浏览器兼容，以及你代码中用到的 API 来进行 polyfill，实现了按需添加。

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        useBuiltIns: 'usage',
        corejs: 3,
      }
    ]
  ]
}

此时再查看我们的打包结果

"use strict";
require("core-js/modules/es.array.includes.js");
var fn = function fn() {
  console.log('ws');
};
var array = [1, 2, 3, 4];
array.includes(1);

只引入了array.includes，good

加入 @babel/plugin-transform-runtime

改造上面的例子在index.js再加一些

......
class Person {
  constructor(name) {
    this.name = name;
  }
  say() {
    console.log(this.name);
  }
}

只转换一个 Person 类，我们看看转换后的文件长啥样

"use strict";
require("core-js/modules/es.symbol.to-primitive.js");
require("core-js/modules/es.date.to-primitive.js");
require("core-js/modules/es.symbol.js");
require("core-js/modules/es.symbol.description.js");
require("core-js/modules/es.object.to-string.js");
require("core-js/modules/es.number.constructor.js");
require("core-js/modules/es.object.define-property.js");
require("core-js/modules/es.symbol.iterator.js");
require("core-js/modules/es.array.iterator.js");
require("core-js/modules/es.string.iterator.js");
require("core-js/modules/web.dom-collections.iterator.js");
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
require("core-js/modules/es.array.includes.js");
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
var fn = function fn() {
  console.log('ws');
};
var array = [1, 2, 3, 4];
array.includes(1);
var Person = /*#__PURE__*/function () {
  function Person(name) {
    _classCallCheck(this, Person);
    this.name = name;
  }
  _createClass(Person, [{
    key: "say",
    value: function say() {
      console.log(this.name);
    }
  }]);
  return Person;
}();

除了require的部分，还多了好多自定义的函数。同学们想一想，现在只有一个index文件需要转换，然而实际项目开发中会有大量的需要转换的文件，如果每一个转换后的文件中都存在相同的函数，那岂不是浪费了，怎么才能把重复的函数去掉呢？

plugin-transform-runtime 闪亮登场。

上面出现的_classCallCheck，_defineProperties，_createClass三个函数叫做辅助函数，是在编译阶段辅助 Babel 的函数。

当使用了plugin-transform-runtime插件后，就可以将babel转译时添加到文件中的内联辅助函数统一隔离到babel-runtime提供的helper模块中，编译时，直接从helper模块加载，不在每个文件中重复的定义辅助函数，从而减少包的尺寸，下面我们看下效果：

// webpack.config.js
module.exports = {
  presets: [
    [
      "@babel/env",
      {
        useBuiltIns: "usage",
        corejs: { version: 3, proposals: true }
      }
    ]
  ],
  plugins: ["@babel/plugin-transform-runtime"]
};

"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
require("core-js/modules/es.array.includes.js");
var fn = function fn() {
  console.log('ws');
};
var array = [1, 2, 3, 4];
array.includes(1);
var Person = /*#__PURE__*/function () {
  function Person(name) {
    (0, _classCallCheck2.default)(this, Person);
    this.name = name;
  }
  (0, _createClass2.default)(Person, [{
    key: "say",
    value: function say() {
      console.log(this.name);
    }
  }]);
  return Person;
}();

完美的解决了代码冗余的问题。你们以为这就结束了吗，还没有。仔细看到这里的同学应该注意到了虽然上面使用 useBuiltIns 配置项实现了poilyfill的按需引用，可是他还存在全局变量污染的情况，就好比这句代码，重写了array的prototype方法，造成了全局污染。

require("core-js/modules/es.array.includes.js");

最后再改造一次babel的配置文件

module.exports = {
  presets: [
    "@babel/preset-env",
  ],
  plugins: [["@babel/plugin-transform-runtime", {
    corejs: 3
  }]]
}

去掉了 @babel/preset-env 的相关参数，而给 plugin-transform-runtime 添加了corejs参数，最终转换后的文件不会再出现polyfill的require的方法了。而是从引入了core-js-stable从而解决转译api层出现的全局变量污染

"use strict";
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/createClass"));
var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
var fn = function fn() {
  console.log('ws');
};
var array = [1, 2, 3, 4];
(0, _includes.default)(array).call(array, 1);
var Person = /*#__PURE__*/function () {
  function Person(name) {
    (0, _classCallCheck2.default)(this, Person);
    this.name = name;
  }
  (0, _createClass2.default)(Person, [{
    key: "say",
    value: function say() {
      console.log(this.name);
    }
  }]);
  return Person;
}();

综上所述，plugin-transform-runtime 插件借助babel-runtime实现了下面两个重要的功能

对辅助函数的复用，解决转译语法层时出现的代码冗余
解决转译api层出现的全局变量污染

参考

加载全部内容