詳解polyfills如何按需加載及場景示例詳解
前言
青銅時代
最使前端頭痛的問題，莫過于瀏覽器兼容性，無論是js，還是css都要考慮瀏覽器兼容性問題，在webpack出來之前，這無非是一個非常頭疼的問題，查到一個兼容性問題，查找很多資料，解決一下，再出來一個問題又要花很長時間解決一下，這無疑要花費很長時間，這無疑浪費了寶貴的摸魚時間。
火槍時代
webpack出來之后，效率提高幾倍，但是有一個問題就是配置復雜，可能有的朋友包括我在內，到現(xiàn)在也沒弄懂 @babel/preset-env,@babel/polyfills, @babel/plugin-transform-runtime的區(qū)別，以及如何配置才是最優(yōu)解
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);
發(fā)現(xiàn)和我代碼幾乎一樣，沒有啥改變
在加入plugins測試之前我們需要知道一些前置知識，babel將ECMAScript 2015+ 版本的代碼分為了兩種情況處理：
- 語法層： let、const、class、箭頭函數(shù)等，這些需要在構建時進行轉譯，是指在語法層面上的轉譯
- 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);
箭頭函數(shù)已經進行了轉化，因為箭頭函數(shù)是語法層面的
@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);
編譯后發(fā)現(xiàn)我們的代碼沒啥變化，但是確把@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的方式實現(xiàn)按需加載
corejs 也要同時配置，2 的版本可以處理全局對象，但實例方法并不處理，所以這里用 3 的版本。
npm install core-js@3
usage 會根據配置的瀏覽器兼容，以及你代碼中用到的 API 來進行 polyfill，實現(xiàn)了按需添加。
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的部分，還多了好多自定義的函數(shù)。同學們想一想，現(xiàn)在只有一個index文件需要轉換，然而實際項目開發(fā)中會有大量的需要轉換的文件，如果每一個轉換后的文件中都存在相同的函數(shù)，那豈不是浪費了，怎么才能把重復的函數(shù)去掉呢？
plugin-transform-runtime 閃亮登場。
上面出現(xiàn)的_classCallCheck，_defineProperties，_createClass三個函數(shù)叫做輔助函數(shù)，是在編譯階段輔助 Babel 的函數(shù)。
當使用了plugin-transform-runtime插件后，就可以將babel轉譯時添加到文件中的內聯(lián)輔助函數(shù)統(tǒng)一隔離到babel-runtime提供的helper模塊中，編譯時，直接從helper模塊加載，不在每個文件中重復的定義輔助函數(shù)，從而減少包的尺寸，下面我們看下效果：
// 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 配置項實現(xiàn)了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 的相關參數(shù)，而給 plugin-transform-runtime 添加了corejs參數(shù)，最終轉換后的文件不會再出現(xiàn)polyfill的require的方法了。而是從引入了core-js-stable從而解決轉譯api層出現(xiàn)的全局變量污染
"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實現(xiàn)了下面兩個重要的功能
- 對輔助函數(shù)的復用，解決轉譯語法層時出現(xiàn)的代碼冗余
- 解決轉譯api層出現(xiàn)的全局變量污染
參考
以上就是詳解polyfills如何按需加載及場景示例詳解的詳細內容，更多關于polyfills按需加載的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了vue loadmore組件上拉加載更多功能示例代碼,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了Vue 中可以定義組件模版的幾種方式以及他們之間的一些差別，需要的朋友可以參考下2019-08-08
vue中使用h5 video標簽實現(xiàn)彈窗播放本地視頻的方法
本文主要介紹了vue中使用h5 video標簽實現(xiàn)彈窗播放本地視頻的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
本篇文章主要介紹了Vue學習筆記進階篇之vue-router安裝及使用方法，具有一定的參考價值，有興趣的可以了解一下2017-07-07
通過url傳遞參數(shù)是我們在開發(fā)中經常用到的一種傳參方法，但通過url傳遞后改如果獲取呢？下面這篇文章主要給大家介紹了關于vue如何不通過路由直接獲取url中參數(shù)的相關資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
本篇文章主要介紹了Vue2.0如何發(fā)布項目實戰(zhàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了vue自動添加瀏覽器兼容前后綴操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue 父組件調用子組件方法及事件的相關資料，父組件傳入數(shù)組子組件循環(huán)來創(chuàng)建不同的組件模塊,所有事件都在子組件內部.怎么實現(xiàn)這樣一個功能呢？接下來跟隨腳本之家小編一起看看吧2018-03-03
這篇文章主要介紹了vue路由跳轉傳參數(shù)的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要介紹了Vue中引入swiper報錯的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10