Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
大規模なWebの開発手法
Kono Junya
May 29, 2018
Technology
1
1.6k
大規模な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
590
Progressive Release by using Fastly
konojunya
1
140
WinTicketにおけるPWA at PWA Night vol.9
konojunya
4
910
新卒研修を終えて
konojunya
0
160
初めてのReact
konojunya
1
300
Other Decks in Technology
See All in Technology
psql, my favorite tool!
nuko_yokohama
1
180
eBPFで実現するコンテナランタイムセキュリティ / Container Runtime Security with eBPF
tobachi
PRO
5
1.5k
SBOMを利用したソフトウェアサプライチェーンの保護
masahiro331
1
170
#awsbasics [LT] サーバレスECにおける Step Functions の使い方
miu_crescent
0
820
脆弱性スキャナのOWASP ZAPを コードベースで扱ってみる / OWASP ZAP on a code base
task4233
1
210
金融スタートアップの上場準備で大事にしたマインドセット / 2022-08-04-the-mindset-in-preparing-for-ipo
stajima
0
300
Settlement simulation testing to ensure correct settlement processing
applepine1125
2
920
最先端の生成AIから考える、ビジネスにおける10年後のパラダイムシフト
sbtechnight
1
310
塩漬けにしているMySQL 8.0.xxをバージョンアップしたくなる、ここ数年でのMySQL 8.0の改善点 / MySQL Update 202208
yoshiakiyamasaki
1
570
Red Hat Partner Training Portal のご紹介 / Red Hat Partner Training Portal Introduction
rhpej
0
110
サイバー攻撃を想定したクラウドネイティブセキュリティガイドラインとCNAPP及びSecurity Observabilityの未来
sakon310
4
440
IBM Cloud Festa Online 2022 Summer
1ftseabass
PRO
0
190
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
60
3.9k
Debugging Ruby Performance
tmm1
65
10k
Writing Fast Ruby
sferik
612
57k
Clear Off the Table
cherdarchuk
79
290k
The Invisible Side of Design
smashingmag
290
48k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.8k
The Web Native Designer (August 2011)
paulrobertlloyd
75
2k
Building Adaptive Systems
keathley
25
1.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Fireside Chat
paigeccino
13
1.4k
Agile that works and the tools we love
rasmusluckow
319
19k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.5k
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ʣ