Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Optimizing Contents Delivery
Search
Gen
March 24, 2017
Programming
29
0
Share
Optimizing Contents Delivery
Gen
March 24, 2017
More Decks by Gen
See All by Gen
VRT
gen
0
15
Introduction to WebRTC
gen
0
240
Introduction to ECS
gen
0
40
Introduction to multiplayer netcode
gen
0
82
Introduction to WebGL
gen
0
51
部屋のワイシャツとカメラと私
gen
0
410
Interaction designer のお仕事
gen
0
84
Other Decks in Programming
See All in Programming
ファインチューニングせずメインコンペを解く方法
pokutuna
0
260
PHP でエミュレータを自作して Ubuntu を動かそう
m3m0r7
PRO
2
170
「速くなった気がする」をデータで疑う
senleaf24
0
130
Migration to Signals, Signal Forms, Resource API, and NgRx Signal Store @Angular Days 03/2026 Munich
manfredsteyer
PRO
0
230
一度始めたらやめられない開発効率向上術 / Findy あなたのdotfilesを教えて!
k0kubun
4
2.8k
今年もTECHSCOREブログを書き続けます!
hiraoku101
0
220
最初からAWS CDKで技術検証してもいいんじゃない?
akihisaikeda
4
180
SkillがSkillを生む:QA観点出しを自動化した
sontixyou
5
2.4k
PCOVから学ぶコードカバレッジ #phpcon_odawara
o0h
PRO
0
140
AI駆動開発がもたらすパラダイムシフト
ryosuke0911
0
110
野球解説AI Agentを開発してみた - 2026/02/27 LayerX社内LT会資料
shinyorke
PRO
0
390
仕様漏れ実装漏れをなくすトレーサビリティAI基盤のご紹介
orgachem
PRO
8
4.4k
Featured
See All Featured
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
140
Site-Speed That Sticks
csswizardry
13
1.1k
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
420
Designing for Timeless Needs
cassininazir
0
180
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
210
WENDY [Excerpt]
tessaabrams
9
37k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
35k
Statistics for Hackers
jakevdp
799
230k
Leading Effective Engineering Teams in the AI Era
addyosmani
9
1.8k
Amusing Abliteration
ianozsvald
1
150
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
470
Transcript
Optimizing Contents Delivery Gen Ichino<@zenoplex>
໔ࣄ߲ (͍͍Θ͚λΠϜ) • FP, FRP ͷ͠·ͤΜ • Rx ͷ͠·ͤΜ •
τʔΫεΫϦϓτ࿅श͍ͯ͠ͳ͍Ͱ͢ • 2018 ʹ͋ͨΓલʹͳΔ͔͠Εͳ͍
“Mobile First” FTW http://gs.statcounter.com/press/mobile-and-tablet-internet-usage-exceeds- desktop-for- fi rst-time-worldwide
Code splitting
Why?
bundle.js
bundle.js vendor.js
Long-term caching • มߋ͕΄ͱΜͲೖΒͳ͍Ϟδϡʔϧ܈ • bundle໊ʹhashΛ͏ • max-age: 31536000 (RFC
2616) • CDN
vendor.js Home Settings User menu button Login
How?
es6 Dynamic Import // sync import React from 'react'; //
sync import { Component } from 'react'; // async const AsyncModulePromise = import('../some_modules');
import() • babel-plugin: syntax-dynamic-import • Stage 3 • Webpack 2
• (path: string) => Promise<*> • Support dynamic module name
DEMO https://syntax-dynamic-import-sample.herokuapp.com/
Webpack
React
React Components • Functions • Classes • Promises
DEMO https://syntax-dynamic-import-react-sa.herokuapp.com/
Where?
Where to code split • Route level • High Order
Components
DEMO https://syntax-dynamic-import-react-sa.herokuapp.com/about
Overhead • Heroku still only supports HTTP/1.1 • Overuse can
lead to less user experience
Is JavaScript mobile friendly?
Responsive Component • Mobile First JavaScript • Always render Mobile
Components • Lazy load Desktop Components when and only if necessary
Thx