Использование Babel-polyfill и оптимизация производительности

внешний интерфейс JavaScript Webpack Babel
Использование Babel-polyfill и оптимизация производительности

Обзор статьи

Основное содержание этой статьи включает в себя: что такое babel-polyfill, как его использовать и как оптимизировать производительность за счет загрузки по требованию.

Все примеры в этой статье можно найти по адресуГитхаб автораоказаться.

что такое babel-polyfill

Babel отвечает только за преобразование синтаксиса, например преобразование синтаксиса ES6 в ES5. Но если некоторые объекты и методы не поддерживаются самим браузером, например:

  1. Глобальные объекты: Promise, WeakMap и т.д.
  2. Глобальные статические функции: Array.from, Object.assign и т. д.
  3. Методы экземпляра: например, Array.prototype.includes и т. д.

В этот момент необходимо представитьbabel-polyfillСмоделировать и реализовать эти объекты и методы.

Пример начала работы

Сначала установите зависимости.

npm install babel-cli --save-dev
npm install webpack@2.7 --save-dev
npm install babel-polyfill --save

Создайте index.js и добавьте зависимости вверхуbabel-polyfill, а затем упаковать в него зависимости через webpack.

// index.js
require('babel-polyfill');

var arr = Array.from('foo');
console.log(arr);  // [ 'f', 'o', 'o' ]

Файл конфигурации веб-пакета выглядит следующим образом:

// webpack.config.js
var path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'index.js'),
  output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name].js'        
  }
};

Когда webpack упакован, вы можете примерно увидеть, какие зависимости вводятся из вывода.

$ `npm bin`/webpack
Hash: 723f2ccdfa0bd8736d3c
Version: webpack 2.7.0
Time: 1080ms
  Asset    Size  Chunks                    Chunk Names
main.js  266 kB       0  [emitted]  [big]  main
 [124] (webpack)/buildin/global.js 509 bytes {0} [built]
 [125] ./~/babel-polyfill/lib/index.js 833 bytes {0} [built]
 [126] ./index.js 96 bytes {0} [built]
 [127] ./~/babel-polyfill/~/regenerator-runtime/runtime.js 24.4 kB {0} [built]
 [128] ./~/core-js/fn/regexp/escape.js 108 bytes {0} [built]
 [314] ./~/core-js/modules/es7.string.pad-start.js 499 bytes {0} [built]
 [315] ./~/core-js/modules/es7.string.trim-left.js 219 bytes {0} [built]
 [316] ./~/core-js/modules/es7.string.trim-right.js 219 bytes {0} [built]
 [317] ./~/core-js/modules/es7.symbol.async-iterator.js 43 bytes {0} [built]
 [318] ./~/core-js/modules/es7.symbol.observable.js 40 bytes {0} [built]
 [319] ./~/core-js/modules/es7.system.global.js 144 bytes {0} [built]
 [320] ./~/core-js/modules/es7.weak-map.from.js 113 bytes {0} [built]
 [321] ./~/core-js/modules/es7.weak-map.of.js 109 bytes {0} [built]
 [322] ./~/core-js/modules/es7.weak-set.from.js 113 bytes {0} [built]
 [327] ./~/core-js/shim.js 8.18 kB {0} [built]
    + 313 hidden modules

существует[327] ./~/core-js/shim.jsВ этой зависимости вводитсяArray.from()Сюда.

require('./modules/es6.array.from');

нагрузка по требованию

В предыдущем примере index.js размером менее 100 байт после транскодирования становится main.js размером 259 КБ, что неприемлемо с точки зрения оптимизации производительности.

$ ll -h index.js build/main.js 
-rw-r--r--  1 a  staff   259K  5 31 14:31 build/main.js
-rw-r--r--  1 a  staff    96B  5 31 14:25 index.js

Обходной путь: введение по запросу можно использовать для оптимизации производительности.

babel-polyfillв основном включаетcore-jsа такжеregeneratorдве части.

  • babel-polyfill: предоставляет фиктивные реализации различных объектов и методов, недавно определенных в спецификациях, таких как ES5, ES6 и ES7.
  • Регенератор: Предоставьте поддержку генератора, если в коде приложения используются генераторные и асинхронные функции.

Оптимизированный код выглядит следующим образом:

// index.js
require('core-js/modules/es6.array.from');

var arr = Array.from('foo');
console.log(arr);  // [ 'f', 'o', 'o' ]

Эффект оптимизации следующий: (259K -> 17K)

$ ll -h index.js build/main.js
-rw-r--r--  1 a  staff    17K  5 31 15:01 build/main.js
-rw-r--r--  1 a  staff   112B  5 31 14:59 index.js

Если вы чувствуете, что загружать объекты и методы по запросу один за другим обременительно, вы также можете загружать их по запросу пакетами.

Например, загружать новые методы/объекты, определенные в ES6, по запросу.

require('core-js/es6');  // core-js/es6/index.js 中引入了es6相关的polyfill

В качестве альтернативы загрузите вновь определенные методы для объектов массива ES6 по требованию.

require('core-js/es6/array');

Ссылки по теме

Вавилон — это .IO/docs/usage/…

Категории