Optimizing Contents Delivery

Transcript

1. Optimizing Contents Delivery Gen Ichino<@zenoplex>
2. ໔੹ࣄ߲ (͍͍Θ͚λΠϜ) • FP, FRP ͷ࿩͸͠·ͤΜ • Rx ͷ࿩΋͠·ͤΜ • τʔΫεΫϦϓτ࿅श͍ͯ͠ͳ͍Ͱ͢ • 2018 ೥ʹ͸͋ͨΓલʹͳΔ͔΋͠Εͳ͍࿩
3. “Mobile First” FTW http://gs.statcounter.com/press/mobile-and-tablet-internet-usage-exceeds- desktop-for- fi rst-time-worldwide
4. Code splitting
5. Why?
6. bundle.js
7. bundle.js vendor.js
8. Long-term caching • มߋ͕΄ͱΜͲೖΒͳ͍Ϟδϡʔϧ܈ • bundle໊ʹhashΛ࢖͏ • max-age: 31536000 (RFC 2616) • CDN
9. vendor.js Home Settings User menu button Login
10. How?
11. es6 Dynamic Import // sync import React from 'react'; // sync import { Component } from 'react'; // async const AsyncModulePromise = import('../some_modules');
12. import() • babel-plugin: syntax-dynamic-import • Stage 3 • Webpack 2 • (path: string) => Promise<*> • Support dynamic module name
13. DEMO https://syntax-dynamic-import-sample.herokuapp.com/
14. Webpack
15. React
16. React Components • Functions • Classes • Promises
17. DEMO https://syntax-dynamic-import-react-sa.herokuapp.com/
18. Where?
19. Where to code split • Route level • High Order Components
20. DEMO https://syntax-dynamic-import-react-sa.herokuapp.com/about
21. Overhead • Heroku still only supports HTTP/1.1 • Overuse can lead to less user experience
22. Is JavaScript mobile friendly?
23. Responsive Component • Mobile First JavaScript • Always render Mobile Components • Lazy load Desktop Components when and only if necessary
24. Thx