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.5k
大規模な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.6k
Progressive Release by using Fastly
konojunya
1
490
WinTicketにおけるPWA at PWA Night vol.9
konojunya
4
1.8k
新卒研修を終えて
konojunya
0
560
初めてのReact
konojunya
1
410
Other Decks in Technology
See All in Technology
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
190
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
1.1k
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
2
260
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
300
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
210
Agile PBL at New Grads Trainings
kawaguti
PRO
1
450
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
5
740
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
880
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1.1k
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
180
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
1.1k
S3アクセス制御の設計ポイント
tommy0124
3
200
Featured
See All Featured
Writing Fast Ruby
sferik
628
62k
A Modern Web Designer's Workflow
chriscoyier
696
190k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
BBQ
matthewcrist
89
9.8k
How to Ace a Technical Interview
jacobian
279
23k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Designing for humans not robots
tammielis
253
25k
Facilitating Awesome Meetings
lara
55
6.5k
Balancing Empowerment & Direction
lara
3
620
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ʣ