CodeFest 2019. Алексей Золотых (Infobip) — Сжимаем Javascript по-взрослому

СЖИМАЕМ JAVASCRIPT ПО- СЖИМАЕМ JAVASCRIPT ПО- ВЗРОСЛОМУ ВЗРОСЛОМУ Алексей Золотых
1

СЖИМАЕМ JAVASCRIPT ПО- СЖИМАЕМ JAVASCRIPT ПО- ВЗРОСЛОМУ ВЗРОСЛОМУ 4

– ЗАЧЕМ? – ЗАЧЕМ? – БЫСТРОДЕЙСТВИЕ! – БЫСТРОДЕЙСТВИЕ! 5

ЭКОНОМИЯ ЭКОНОМИЯ 6

Экономия Время на сеть Процессор Память 7

Пример 1 9

5mb <!DOCTYPE html> <html lang="en"> <head> </head> <body> <script src="./index.js"></script>
</body> </html> 10

Network — 100ms 11

Parse — 300ms 12

Evaluate — 500ms 13

Пример 2 14

class Point { constructor() { ... this.x = x; ...
} 15

Babel function _instanceof(left, right){...} function _classCallCheck(instance, Const function _defineProperties(target, props
function _createClass(Constructor, proto 16

КАК? КАК? Потоковое сжатие Сжатие на основе AST 18

ПОТОКОВОЕ СЖАТИЕ ПОТОКОВОЕ СЖАТИЕ на уровне сервера 19

npx create-react-app my-app 20

Без кэша + Slow 3G 21

Размер 120k Время всего запроса 4 сек 22

Ожидание 2 сек Загрузка 2 сек 23

Сжатие в потоке gzip1— 50–90% gzip9 — 15–45% от gzip1
zopﬂi — 4–7% от gzip9 brotli11 — 8–65% от zopﬂi 24

Размер Время Было 120 4 Стало 40 2,7 25

30% БЫСТРЕЕ 30% БЫСТРЕЕ ЗАГРУЗКА СТРАНИЦЫ ЗАГРУЗКА СТРАНИЦЫ * *
* для медленных сетей и быстрых устройств 26

... gzip on; gzip_static on; gzip_vary on; gzip_types ... brotli
on; brotli_comp_level 4; brotli_static on; brotli types 29

ОПЫТ LINKEDIN ОПЫТ LINKEDIN http://bit.do/brotli 30

GIST С ОПИСАНИЕМ GIST С ОПИСАНИЕМ http://bit.do/jsgzip 31

Итого: Просто Для сети Не работает для маленьких файлов Почти
всегда стоит включить 32

«Для js файлов на фоне космического коэффициента сжатия brotli считаю
ненужным минификацию» 33

<!DOCTYPE html> <html lang="en"> <head> <script src="https://CDN/lodash.js"> </head> <body> </body>
34

lodash.js По сети В браузере 87k 527k 36

Можем сжать? 37

UglifyJS используется в lodash 38

uglifyjs lodash.js > lodash.min.js 39

По сети В браузере 35k 144k 40

Убрали пробелы Убрали комменты 41

Протянули константы (function() { const a = 1; const b
= 2; console.log(a + b); }()); console.log(3); 42

if(1 * 5){ console.log(1) } console.log(1); 43

arrows, booleans, collapse_vars, comparisons, computed_props, conditionals, dead_code, drop_console, drop_debugger, ecma,
evaluate, expression, global_defs, hoist_funs, hoist_props, hoist_vars, ie8, if_return, inline, join_vars, keep_classnames, keep_fargs, keep_fnames, keep_inﬁnity, loops, negate_iife, passes, properties, pure_getters, pure_funcs, reduce_funcs, reduce_vars, sequences, side_eﬀects, switches, top_retain,

toplevel, typeofs, unsafe, unsafe_arrows, unsafe_comps, unsafe_Function, unsafe_math, unsafe_methods, unsafe_proto, unsafe_regexp,
unsafe_undeﬁned, unused, warnings, 44

Можем ещё? 45

uglifyjs lodash.js --mangle > lodash.min 46

* кроме функций верхнего уровня function lognLongLongName(mySuperArgs){ return mySuperArgs[0]; }
function n(i){ return i[0]; } 47

По сети В браузере 23k 72k 48

Как толстеет бандл? 49

от 23к до 576к import * as _ from 'lodash'
if (_.has([1, 2, 3], 2)) { console.log("debug"); } 50

от 3к до 10к import * as _ from 'lodash/has'

IMPORT COST IMPORT COST JetBrains VSCode bit.do/jcost bit.do/vcost 52

Как это скомпилит UglifyJS? import * as _ from 'lodash/has'

import * as _ from 'lodash/has' ^ ERROR: Unexpected token:
name ?? expected: punc ?? 55

UglifyJS 56

Terser github.com/terser-js/terser 57

Что можно еще улучшить? 58

Treeshaking 59

module.js export function square(x) { return x * x; }
export function cube(x) { return x * x * x; } 61

index.js import {cube} from './module' console.log(cube(x)) 62

Мечта function cube(x) { return x * x * x;
} console.log(cube(x)) 63

Реальность !function(e){var r={};function t(n){if(r[n])return r[n].exports;var o=r[n]= {i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=r,t.d=function(e,r,n) {t.o(e,r)||Object.defineProperty(e,r, {configurable:!1,enumerable:!0,get:n})},t.r=function(e)
{Object.defineProperty(e,"__esModule",{value:!0})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},t.p="",t(t.s=0)}([function(e,r,t){"use strict";t.r(r);var n;console.log((n=3)*n*n)}]); 64

Dry противоречит Treeshaking 65

export function cube(x) { return x * x * x; } 66

export function cube(x) { return square(x) * x } 67

Иногда Treeshaking не работал в Webpack 68

Статья на Хабре bit.do/treesh 69

... /* unused harmony export square */ /* harmony export
(immutable) */ __webpa function square(x) { return x * x; } function cube(x) { t * * 70

... /* unused harmony export square */ /* harmony export
(immutable) */ __webpa function square(x) { return x * x; } function cube(x) { t * * 71

module.js export class MyClass { print(){ console.log('find me'); } }
72

/* unused harmony export MyClass */ var MyClass = function
() { function MyClass() { babelHelpers.classCallCheck(this, My } MyClass.prototype.turn = function prin console.log('find me'); }; 73

/* unused harmony export MyClass */ var MyClass = function
() { function MyClass() { babelHelpers.classCallCheck(this, My } MyClass.prototype.turn = function prin console.log('find me'); }; 74

UglifyJS не понимает, что выкидывать 75

... /* unused harmony export MyClass */ var MyClass =
/*#__PURE__*/ function ... 76

Как починить Babel 7 Webpack 77

Как нужно 78

Код на Dart void main() { print(cube(3)); } int cube(int
x) => x * x * x; int square(int x) => x * x; 79

Вывод ... main: function() { H.printString("27"); } ... 80

class Car { Rudder rudder; List<Wheel> wheelList; } 81

class Rudder { void turn(){ print('turn'); } } class Wheel
{ void pump(){ print('pump'); } } 82

void main(){ final car = new Car(); car.wheelList = [
new Wheel() new Wheel(), new Wheel(), new Wheel(), ]; car.rudder = new Rudder(); car.rudder.turn(); } 83

... main: function() { H.printString("turn"); } ... 84

— Почему так не может Terser?! 85

— Потому что он использует AST 86

Dart использует SSA форму для оптимизаций 87

SSA (англ. Static single assignment form) — промежуточное представление, используемое
компиляторами, в котором каждой переменной значение присваивается лишь единожды 88

Книга по SSA bit.do/ssabook 89

— Я не хочу писать на Dart! — Есть же
Closure Compiler! 90

const car = { wheelList: [ new Wheel(), new Wheel(),
new Wheel(), new Wheel(), ], rudder: new Rudder(), }; 91

console.log("turn"); 92

ОПТИМИЗАЦИИ ОПТИМИЗАЦИИ normalize optimizeArgumentsArray aggressiveInlineAliases collapseProperties earlyInlineVariables earlyPeepholeOptimizations removeUnusedCode disambiguateProperties
codeRemovingLoop devirtualizePrototypeMethods ﬂowSensitiveInlineVariables mainOptimizationLoop ﬂowSensitiveInlineVariables removeUnusedCode collapseAnonymousFunctions extractPrototypeMemberDeclarations ambiguateProperties renameProperties convertToDottedProperties coalesceVariableNames peepholeOptimizations exploitAssign collapseVariableDeclarations denormalize renameVars renameLabels latePeepholeOptimizations 93

Сложности 96

527k ⟹ 140k java -jar compiler.jar \ --compilation_level ADVANCED \
--language_in=ES6 \ --js lodash.js > out.js 97

Нужны типы 98

/** * This annotation spans multiple lines * @type {{
* id:number, * val:string, * }} */ 99

TSICKLE TSICKLE TypeScript ⟹ Closure Translator 100

Если все скомпилировалось в это, то console.log("turn"); 101

Как будет работать здесь? <script> var rudder = new Rudder();
</script> 102

const car = {}; car.idNumber = '1234'; function displayId(car) {
alert(car['idNumber']); } alert(car.idNumber); displayId(car); 103

var a={}; a.a="1234"; alert(a.a); alert(a.idNumber); 104

prepack.io 105

(function () { function fibonacci(x) { return x <= 1
? x : fibonacci(x - 1 } global.x = fibonacci(15); })(); 106

x = 610; 107

Lodash? 527k ⇒ 868k 108

Выводы Потоковое сжатие Можно оставить как есть GCC не для
библиотек Искать другие варианты 109

Алексей Золотых twitter: Спасибо за внимание! @zolotyh 110

CodeFest 2019. Алексей Золотых (Infobip) — Сжимаем Javascript по-взрослому

CodeFest 2019. Алексей Золотых (Infobip) — Сжимаем Javascript по-взрослому

More Decks by CodeFest

Other Decks in Technology

Featured

Transcript