2fast2furios

fast web for people

Transcript

1. React Russia 2019 Быстрее, стройнее, умнее Красновский Денис telegram: @jquery_dlya_slabih
2. React Russia 2019 2
3. React Russia 2019 3 Hello, WEB Slowking, Slowpoke, Slowbro и Slow web
4. React Russia 2019 4 SEO
5. React Russia 2019 5 User experience
6. React Russia 2019 6
7. React Russia 2019 7 Check it! • Sonarlint • Lighthouse • PageSpeed Insights
8. React Russia 2019 8 Bad news…
9. React Russia 2019 9
10. React Russia 2019 10
11. React Russia 2019 11 Phase 2 1. Оптимизация ресурсов (js, css, html, images, …) 2. Code splitting 3. Правильная поддержка старых браузеров 4. Compress it
12. React Russia 2019 12 Browserslist Share target browsers across projects and front-end tools, like @Autoprefixer, @Stylelint and @babeljs
13. React Russia 2019 13 Define browsers environment
14. React Russia 2019 14 Webpack Static module bundler for modern JavaScript applications
15. React Russia 2019 15 JS optimization Since version 4 webpack runs optimizations for you depending on the chosen mode, still all optimizations are available for manual configuration and overrides
16. React Russia 2019 16 optimization.minimizer
17. React Russia 2019 17 CSS optimization • css-loader • postcss-loader • optimize-css-assets-webpack-plugin
18. React Russia 2019 18 CSS optimization
19. React Russia 2019 19 CSS optimization
20. React Russia 2019 20 CSS optimization
21. React Russia 2019 21 HTML optimization html-webpack-plugin remove render blocking scripts
22. React Russia 2019 22 Images optimization image-webpack-loader or https://jakearchibald.github.io/svgomg/
23. React Russia 2019 23 Babel The compiler for next generation JavaScript
24. React Russia 2019 24 babel-preset-env • modules • loose • targets
25. React Russia 2019 25 babel-plugin-transform-react-remove-prop-types
26. React Russia 2019 26 vendors ~ 294 KB app ~ 149 KB max weight page ~ 197 KB … min weight page ~ 8 KB Code splitting [theory]
27. React Russia 2019 27 WEBSITE PAGE 3 PAGE 2 LOGIN … PAGE 10 VENDORS APP.JS LOGIN.JS PAGE_1.JS … PAGE_10.JS w/o code splitting [theory] APP.CSS LOGIN.CSS PAGE_1.CSS … PAGE_10.CSS
28. React Russia 2019 28 WEBSITE PAGE 3 PAGE 2 LOGIN … PAGE 10 VENDORS APP.JS With сode splitting [theory] APP.CSS LOGIN.JS LOGIN.CSS PAGE_3.JS PAGE_3.CSS
29. React Russia 2019 29 Code splitting [practice]
30. React Russia 2019 30 Old browsers support • В идеале необходим сплит между старыми и новыми браузерами • Правильно работать с @babel/polyfill
31. React Russia 2019 31 @babel/polyfill • modules • loose • targets • useBuiltIns
32. React Russia 2019 32 useBuiltIns • entry • usage
33. React Russia 2019 33 Compress it • nginx • compression-webpack-plugin
34. React Russia 2019 34 Expected result
35. React Russia 2019 35 Result
36. React Russia 2019 36 P.S.
37. React Russia 2019 37 Pitfalls 1. оверхед 2. dev инструменты в production коде 3. npm driven development
38. React Russia 2019 38 npm driven development
39. React Russia 2019 39 Tools 1. Import-cost 2. bundlephobia.com 3. duplicate-package-checker-webpack-plugin
40. React Russia 2019 40 Спасибо за внимание, вопросы? Telegram: @jquery_dlya_slabih http://bit.ly/reactDomClick