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
With Devin -AIの自律とメンバーの自立
kotanin0
2
400
少人数でも回る! DevinとPlaybookで支える運用改善
ishikawa_pro
4
1.2k
激動の時代、新卒エンジニアはAIツールにどう向き合うか。 [LayerX Bet AI Day Countdown LT Day1 ツールの選択]
tak848
0
570
大規模組織にAIエージェントを迅速に導入するためのセキュリティの勘所 / AI agents for large-scale organizations
i35_267
6
290
CSPヘッダー導入で実現するWebサイトの多層防御:今すぐ試せる設定例と運用知見
llamakko
1
240
2025/07/22_家族アルバム みてねのCRE における生成AI活用事例
masartz
2
110
クマ×共生 HACKATHON - 熊対策を『特別な行動」から「生活の一部」に -
pharaohkj
0
100
生成AIによる情報システムへのインパクト
taka_aki
1
170
「AI駆動開発」のボトルネック『言語化』を効率化するには
taniiicom
1
180
Power Automate のパフォーマンス改善レシピ / Power Automate Performance Improvement Recipes
karamem0
0
230
Amazon CloudWatchのメトリクスインターバルについて / Metrics interval matters
ymotongpoo
3
220
AI工学特論: MLOps・継続的評価
asei
10
1.8k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
70
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Adopting Sorbet at Scale
ufuk
77
9.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
KATA
mclloyd
30
14k
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ʣ