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
大規模なWebの開発手法
Search
Kono Junya
May 29, 2018
Technology
1
2.4k
大規模なWebの開発手法
vsLTというLTイベントで話をしたスライドになります。
isomorphicの話とcode splittingの話をしました。
Kono Junya
May 29, 2018
Tweet
Share
More Decks by Kono Junya
See All by Kono Junya
FUJIMIのFastly活用事例集
konojunya
0
1.4k
Progressive Release by using Fastly
konojunya
1
440
WinTicketにおけるPWA at PWA Night vol.9
konojunya
4
1.6k
新卒研修を終えて
konojunya
0
550
初めてのReact
konojunya
1
370
Other Decks in Technology
See All in Technology
MobileActOsaka_241018.pdf
akaitadaaki
0
110
WebRTC と AI の組み合わせ
tnoho
0
100
外部カンファレンスで登壇しよう! 〜「強い」エンジニアへの一歩を踏み出す〜
logica0419
4
140
いまいまMySQL2024 @ OSC Nagaoka
sakaik
3
300
生成AIの活用パターンと継続的評価
asei
3
270
全社を巻き込んだ業務オペレーション改善と、それは事業成長に貢献しているのか?を実感した話
marroooon
0
150
Bluesky 2019〜2022
yamarten
1
120
Cosmos DB で持続可能な RAG を実現しよう!~ AOAI Dev Day ふりかえりを添えて / Sustainable RAG with Cosmos DB with recap AOAI Dev Day
miyake
0
180
暴カワでビデオシンセサイザーを導入する技術
yuchi
2
130
運営11年目タイトルを守る最強の盾の有効性と活用法
mixi_engineers
PRO
2
120
Covariance, Contravariance & Diamond
alexdaubois
1
120
Brakeman を欺く - Kashiwa.rb #4
kozy4324
1
100
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.3k
Testing 201, or: Great Expectations
jmmastey
38
7k
The Art of Programming - Codeland 2020
erikaheidi
51
13k
Typedesign – Prime Four
hannesfritz
39
2.4k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
A Tale of Four Properties
chriscoyier
156
22k
A better future with KSS
kneath
237
17k
A designer walks into a library…
pauljervisheath
202
24k
Transcript
େنͳWebͷ։ൃख๏ By Junya Kono
໊લ: Տ ७ʢίϊ δϡϯϠʣ χοΫωʔϜ: ͡ΎΜ͡ΎΜ ֶߍ: HALେࡕITֶ෦Web։ൃֶՊ झຯ: ϘϧμϦϯάɺಡॻ
࠷ۙͷྲྀߦΓͷٕज़
࠷ۙͷྲྀߦΓͷٕज़
ࠓճ࠾༻ٕͨ͠ज़
SPAॳճϩʔυ͕͍ɻ
ΛSSRΛ͍ͨ͠ɻ
ͰɺભҠͱؚ͔Ίͯ SPAͷྑ͞׆͔͍ͨ͠ɻ
ΛSPAʹ͍ͨ͠ɻ
None
Isomorphic Web Application
Isomorphic ͱͳʹ͔ SPA Client Server API SPAͱͯ͠ɺը໘ΛΫϥΠΞϯτ͕ඳը͢Δɻ
Isomorphic ͱͳʹ͔ Isomorphic Client Server API SSRͰϢʔβʔʹ͙͢ʹը໘͕ඳը͞Ε Ϛϯτ͞Ε͔ͯΒSPAͱͯ͠ৼΔ͏
ΛSSR + SPAʹͰ͖ͨ
େنͳWeb = bundle.jsͷංେԽ
None
Code Splitting
Dynamic import ʢstage-3ͷػೳͰ͢ʣ
Dynamic import const main = () => { const lib
= import(“./lib”) lib() } ඇಉظΛPromiseͰಡΈࠐΈ͢Δɻ ͜ΕʹΑͬͯɺbundle.jsʹrequire͢Δίʔυ͕ు͔ΕΔɻ
ϑΝΠϧαΠζͷܭଌ import moment from “moment” const getDate = () =>
{ return moment().format(“YYYY/MM/DD“) } export default getDate ReactͰ͍͏ͱɺͦͷϖʔδͷίϯϙʔωϯτ heavy.js
ϑΝΠϧαΠζͷܭଌ import heavy from “./heavy” const main = () =>
{ console.log(“Today is…”) console.log(heavy()) } main() ී௨ʹimportͯ͠ɺ࣮ߦͯ͠ΈΔɻ main.js 619KB
ϑΝΠϧαΠζͷܭଌ const getDate = () => import(“./heavy”) const async main
= () => { console.log(“Today is…”) const m = await getDate() console.log(m.default()) } main() Dynamic importͯ͠ΈΔ code_splitting.js 7.9KB
Code splittingʹΑͬͯ 619KB -> 7.9KB ʹϕʔεͷϑΝΠϧαΠζΛݮΒͤͨʂʂʂʂʂʂ GitHubʹίʔυ্͍͛ͯ·͢ɻ github.com/konojunya/dynamic-import-sample
None
·ͱΊ SSRͱSPAͷྑ͍ͱ͜औΓΛ͠Α͏ʂ > Isomorphic Web Application ϕʔεͷbundle.jsΛখ͘͞͠Α͏ʂ > dynamic importʢcode
splittingʣ