У меня будет 8 минут чтобы рассказать вам о том, как потратить 1 час на то, чтобы сэкономить недели ожидания загрузки лишнего кода вашими клиентами.

1. Artem Yavorsky. WIX, HellYeah
99 ways to take away your ugly polyfills

2. ARTEM
YAVORSKY

3. SHIMS POLYFILLS

4. SHIMS POLYFILLS

6. !?

7. 💡

8. react, vue, angular

9. react, vue, angular
🤯

10. class MyApp {
async load() {
const data = await fetch(‘data’);
// …
}
}

11. npm i --save-dev @babel/core @babel/preset-env

12. npm i --save-dev @babel/core @babel/preset-env
👍

13. const set = new Set();
const obj = Object.freeze(x);
const user = Reflect.construct(User, args);
Array.from(nodes);

15. Transpiling != Polyfilling

16. Transpiling Polyfilling
new syntax new API

17. npm i --save-dev @babel/polyfill

18. fetch(‘/user’)
imageCapture = new ImageCapture(track);
const myRequest = new Request(‘user.jpg');
const searchParams = new URLSearchParams(paramsString);

20. Javascript API != Browser API

21. https://caniuse.com/

22. https://caniuse.com/
BROWSER API

23. kangax.github.io/compat-table/es6/

24. kangax.github.io/compat-table/es6/
Javascript API

25. npm i —-save whatwg-fetch
npm i --save image-capture
npm i —-save classlist.js

26. import ‘image-capture';
import 'whatwg-fetch';
import 'url-search-params';
new Set();
fetch('/user')
const searchParams = new URLSearchParams(paramsString);

27. import ‘image-capture';
import 'whatwg-fetch';
import 'url-search-params';
new Set();
fetch('/user')
const searchParams = new URLSearchParams(paramsString);
👍

28. eslint-plugin-compat

29. core-js

30. core-js
~242KB (52 gzipped)

31. require('core-js/fn/set');
new Set();
const Map = require(‘core-js/library/fn/map');

32. babel-polyfill

33. babel-polyfill
(core-js + regenerator runtime)

34. presets: [
['env', {
targets: ‘chrome 56’
useBuiltIns: ‘entry'
}]
]
with preset-env + `entry` option

35. import “@babel/polyfill”;
with preset-env + `entry` option
require("core-js/modules/es7.string.pad-start");
require(“core-js/modules/es7.string.pad-end");
require("core-js/modules/web.timers");
require("core-js/modules/web.immediate");
require("core-js/modules/web.dom.iterable");

36. presets: [
['env', {
targets: ‘> 2%’
useBuiltIns: ‘usage’
}]
]
with preset-env + `usage` option

37. Promise.all();
Symbol(2);
function* gen() {
yield 1;
};
with preset-env + `usage` option
require("regenerator-runtime/runtime");
require("core-js/modules/es6.symbol");
require(“core-js/modules/es6.promise");

38. <script src=“https://cdn.polyfill.io/v2/polyfill.min.js"></script>

39. <script
src=“https://cdn.polyfill.io/v2/
polyfill.min.jsfeatures=Array.prototype.map,modernizr:es5array|always”>
</script>
Custom features

40. var features = [];
('Promise' in window) || features.push('Promise');
('IntersectionObserver' in window) || features.push('IntersectionObserver');
('after' in Element.prototype) || features.push('Element.prototype.after');
Feature detection

41. cons
You need to track all features you are using

42. cons
You need to track all features you are using
Scripts that are dynamically created and added
to the document are async by default

43. cons
You need to track all features you are using
Scripts that are dynamically created and added
to the document are async by default
Browser has to parse and execute script
which creates other script for polyfill.io

44. cons
You need to track all features you are using
Scripts that are dynamically created and added
to the document are async by default
Browser has to parse and execute script
which creates other script for polyfill.io
polyfill.io caching

45. babel-preset-env with `usage` option
+
bundle-utils

47. ES7 polyfills
ES6 + ES7 polyfills
All polyfills
latest
Generate 3 bundles
bundle-utils

48. 📦
bundle-utils

49. 📦
📦
bundle-utils

50. 📦
📦
📦
bundle-utils

51. Thanks

52. • www.html5rocks.com/en/tutorials/speed/script-loading/
• polyfill.io/v2/docs
• babeljs.io/docs/usage/polyfill/
• github.com/babel/website/issues/599
• hackernoon.com/polyfills-everything-you-ever-wanted-
to-know-or-maybe-a-bit-less-7c8de164e423
• philipwalton.com/articles/loading-polyfills-only-when-
needed/
• github.com/yavorsky/bundle-utils

53. yavorsky_
yavorsky