Optimize the size of your SPA, битва за байты

2019 год, современный веб, PWA, SPA, bundle на фронте от одного мегабайта javascript. Стоп! Мы перестали ставить в приоритет экономию трафика и TTI пользователей, как делали это раньше. Пришло время разобраться в техниках оптимизации размера JS/CSS/IMAGE. Это битва за байты и мы ее начинаем.

Видео: https://youtu.be/A_fzyRC6XvU?t=8338
GitHub: https://github.com/ovr
Twitter: https://twitter.com/ovrweb

Transcript

1. PiterJSConf Optimize the size of your SPA, битва за байты
2. 2 Дмитрий Пацура https://github.com/ovr x3 (+1) x2 (+1)
3. Автоматизированный pipeline помогающий готовить NodeJS c GraphQL через сообщение в telegram, используя консольный клиент, запущенный в VSCode. (и немножко про AST)
4. • Компрессия • Минификация • Code splitting/bundling/tree shaking • Главная проблема мира JavaScript • Главная проблема мира Dart • Polyfills • Альтернативные библиотеки • В заключение Поговорим 4
5. Зачем это все?
6. Зачем это все? 40% уходят при загрузке больше 3 секунд +7% на каждую дополнительную секунду 6
7. 3 M B JS на Frontend
8. Зачем это все? 8 Умножая на объемы
9. Зачем это все? Сетевой уровень Транспортный уровень Уровень приложения (размера ресурсов) 9
10. Зачем это все? 10
11. Зачем это все?
12. Компрессия
13. Компрессия 1.6mb 334kb Content-Encoding: gzip Accept-Encoding: gzip, deflate, br https://leroymerlin.ru/etc/designs/elbrus/clientlibs/vendor.min.856b541ba3f938cd8c2a9d52adcc288c.js 13
14. Компрессия gzip Deflate — это алгоритм сжатия без потерь, использующий комбинацию алгоритмов LZ77 и Хаффмана. gzip = GNU ZIP 14
15. Компрессия gzip gzip -1 -c vendor.js | wc -c | numfmt --to=iec-i --suffix=B --padding=10 1 421KiB 2 399KiB 3 381KiB 4 356KiB 5 340KiB 6 333KiB 7 331KiB 8 329KiB 9 329KiB
16. Компрессия Brotli Метод сжатия основан на современном варианте алгоритма LZ77, энтропийном кодировании Хаффмана и моделировании контекста 2-го порядка.ка.
17. Компрессия
18. Компрессия brotli brotli -1 -c vendor.js | wc -c | numfmt --to=iec-i --suffix=B --padding=10 1 391KiB 2 358KiB 3 350KiB 4 336KiB 5 308KiB 6 303KiB 7 300KiB 8 298KiB 9 296KiB 11 268KiB
19. Компрессия brotli (268KiB) vs gzip (329KiB) 22% 61Kib better then gzip best 334KiB in original network
20. Минификация
21. Минификация https://leroymerlin.ru/etc/designs/elbrus/clientlibs/vendor.min.856b541ba3f938cd8c2a9d52adcc288c.js 21
22. Минификация UglifyJS is a JavaScript parser, minifier, compressor and beautifier toolkit. uglifyjs-3 22
23. Минификация Since webpack 4 enabled by default when mode = production 23
24. Минификация 1580Kib > 608Kib > 172Kib > 159Kib input uglify gzip brotli 24
25. Минификация 428KB - no optimisation 164K - enabled by default On my pet project
26. Минификация optimization: { minimizer: [ new TerserPlugin({ extractComments: true, }), ], }, ├── app.3f65094c2a1291a425ba.js ├── app.3f65094c2a1291a425ba.js.LICENSE
27. Минификация babel/minify
28. Минификация babel/minify
29. Компрессия after (162KiB) vs before (164KiB) @babel/minify 2kb additional with terser
30. Code Splitting/Bundling
31. const BundleAnalyzer = require(‘webpack-bundle-analyzer’); plugins.push(...[ new BundleAnalyzerPlugin.BundleAnalyzerPlugin(), ]);
33. Начинаем оптимизировать
34. tree shaking
35. import {merge} from 'lodash'; console.log(merge({ a: 1 }, { b: 2 })); ideal example
37. import {merge} from 'lodash'; module.exports = require('./lodash'); node_modules/lodash/index.js node_modules/lodash/lodash.js 528K lodash.js 17k lines
38. Начинаем оптимизировать lodash-es Looking for Lodash modules written in ES6 or smaller bundle sizes? Check out lodash-es. 38
39. export { default as add } from './add.js'; export { default as after } from './after.js'; export { default as ary } from './ary.js'; export { default as assign } from './assign.js'; //...... export { default } from './lodash.default.js'; node_modules/lodash-es/lodash.js lodash-es provides ES modules
40. Automatically replace by alias resolve: { alias: { 'lodash': 'lodash-es', }, },
41. lodash-es + webpack-plugin + babel-plugin
42. tree shaking What is a problem?
43. Начинаем оптимизировать https://github.com/webpack/webpack/issues/6264 43
44. Начинаем оптимизировать What is a problem with tree shaking?
45. Начинаем оптимизировать Webpack Deep Scope Analysis Plugin https://github.com/vincentdchan/webpack-deep-scope-analysis-plugin A webpack plugin for deep scope analysis. It's a project of GSoC 2018 webpack organization. It's a plugin to improve tree-shaking. It can make webpack eliminate the unused imports related to the unused exports. It solves the issue 6254 for webpack. Student: @Vincent Mentor: @Tobias 45
46. Начинаем оптимизировать import { isNull } from 'lodash-es'; var fun = 1; fun = function scope(...args) { return isNull(...args); } export { fun } Re-assign function to variable
47. tree shaking DCE
48. Начинаем оптимизировать function foobar() {} function foo() { var a = foobar(); var b = 8; return 10; } console.log(foo()); function foobar() {} function foo() { foobar(); return 10; } console.log(foo()); Input Result
49. Начинаем оптимизировать function foobar() {} function foo() { var a = /* @__PURE__ */ foobar(); var b = 8; return 10; } console.log(foo()); function foobar() {} function foo() { return 10; } console.log(foo()); Input Result
50. tree shaking Rollup
51. Начинаем оптимизировать Вариант радикальный: Rollup Next-generation ES module bundler 51
52. Bundling
53. web pack split chunks optimization: { splitChunks: { chunks: 'all', }, },
54. <script type="text/javascript" src="/bundle.f91952.js" /> <script type="text/javascript" src="/vendor.f91952.js" /> <script type="text/javascript" src=“/applic.f91952.js" /> before after
55. Начинаем оптимизировать
56. splitChunks: { chunks: 'async', minSize: 30000, maxSize: 0, minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, automaticNameDelimiter: '~', automaticNameMaxLength: 30, name: true, },
57. Bundling Dynamic import
58. Начинаем оптимизировать
59. export async function getDeviceId(): Promise<string> { const fp2 = await import('fingerprintjs2'); const components = await fp2.getPromise(); return fp2.x64hash128( components.map((pair) => pair.value).join(), 31 ); }
61. import(/* webpackPrefetch: true */ 'fingerprintjs2'); prefetch/preload <link rel="prefetch" as="script" href="/fp2.js"> html.head
62. Bundling Chunking
63. optimization: { splitChunks: { chunks: 'all', cacheGroups: { fp2: { test: /[\\/]fingerprintjs2[\\/]/, name: 'fp2', chunks: 'all', }, vendors: { reuseExistingChunk: true, }, }, }, },
65. HTTP 1 -> HTTP 2 new webpack.optimize.AggressiveSplittingPlugin({ minSize: 30000, maxSize: 50000 });
66. https://webpack.js.org/configuration/optimization/ https://github.com/webpack/webpack/tree/master/examples >= 25 examples https://webpack.js.org/guides/code-splitting/
67. Google Closure Compiler
68. Минификация Google Closure Compiler / GCC The Closure Compiler is a tool for making JavaScript download and run faster. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript. It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what's left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls. 68
69. Минификация Tsickle — TypeScript to Closure Translator https://github.com/angular/tsickle 69
70. Главная проблема мира JavaScript
71. Главная проблема *.ts *.js typescript web pack terser bundle.js 71
72. Главная проблема *.dart compiler bundle.js https://github.com/dart-lang/sdk/tree/master/pkg/compiler 72
73. Главная проблема dart2js • Load kernel -> kernel AST • Model • Tree-shake and create world • Analyze • codegen model • codegen and tree-shake • emit 73
74. Начинаем оптимизировать Нужно было сделать выбор в пользу Dart PiterDart звучит лучше
75. Главная проблема мира Dart
76. Главная проблема • мертв • жив • другой язык 76
77. Polyfills
78. Polyfills browserlist The config to share target browsers and Node.js versions between different front-end tools. It is used in: • Autoprefixer • Babel • postcss-preset-env • eslint-plugin-compat • stylelint-no-unsupported-browser-features • postcss-normalize • obsolete-webpack-plugin 78
79. Polyfills Modern Web 79
80. Polyfills Legacy Web 80
81. Polyfills @babel/preset-env 81
82. Polyfills https://babeljs.io/repl 82
83. Polyfills useBuiltIns "usage" | "entry" | false, defaults to false. This option configures how @babel/preset-env handles polyfills. 83
84. Polyfills tslib 84
85. Polyfill.io Upgrade the web. Automatically. It's a service which accepts a request for a set of browser features and returns only the polyfills that are needed by the requesting browser.
87. Начинаем оптимизировать Google closure Runtime
88. Polyfills Multi bundle
89. Legacy Modern bundle.es5.js bundle.mjs
90. <!-- Browsers with ES module support load this file. --> <script type="module" src=“/bundle.mjs” /> <!-- Older browsers load this file (and module-supporting --> <!-- browsers know *not* to load this file). --> <script nomodule src=“/bundle.es5.js” /> Two bundles, one for new, one for old
91. https://github.com/firsttris/html-webpack-multi-build-plugin This plugin simplifies the creation of script tags for module and nomodule for a webpack multi build configuration.
92. Альтернативные библиотеки
93. Альтернативные https://bundlephobia.com/ 93
94. Альтернативные 2,7 kb 35,6 kb 42,7 kb 108,6 kb 94
95. Альтернативные 95
96. Альтернативные + 96
97. Альтернативные 97
98. Альтернативные 98
99. Альтернативные A tiny routing solution for modern React apps that relies on Hooks. A router you wanted so bad in your project!
100. Альтернативные 100
101. Альтернативные 101
102. Альтернативные 102
103. В Заключение
104. В заключение • Cache/Expire • E-Tag • HSTS • CDN • DNS-PREFETCH • PRECONNECT • И много еще всего :)
105. В заключение Стоит ли применять озвученные практики?
106. 106 Дмитрий Пацура https://github.com/ovr talk@dmtry.me https://telegram.me/ovrweb Спасибо за внимание! https://twitter.com/ovrweb