Slide 1
Slide 1 text
େنͳWebͷ։ൃख๏
By Junya Kono
Slide 2
Slide 2 text
໊લ: Տ ७ʢίϊ δϡϯϠʣ
χοΫωʔϜ: ͡ΎΜ͡ΎΜ
ֶߍ: HALେࡕITֶ෦Web։ൃֶՊ
झຯ: ϘϧμϦϯάɺಡॻ
Slide 3
Slide 3 text
࠷ۙͷྲྀߦΓͷٕज़
Slide 4
Slide 4 text
࠷ۙͷྲྀߦΓͷٕज़
Slide 5
Slide 5 text
ࠓճ࠾༻ٕͨ͠ज़
Slide 6
Slide 6 text
SPAॳճϩʔυ͕͍ɻ
Slide 7
Slide 7 text
ΛSSRΛ͍ͨ͠ɻ
Slide 8
Slide 8 text
ͰɺભҠͱؚ͔Ίͯ
SPAͷྑ͞׆͔͍ͨ͠ɻ
Slide 9
Slide 9 text
ΛSPAʹ͍ͨ͠ɻ
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Isomorphic Web
Application
Slide 12
Slide 12 text
Isomorphic ͱͳʹ͔
SPA
Client
Server
API
SPAͱͯ͠ɺը໘ΛΫϥΠΞϯτ͕ඳը͢Δɻ
Slide 13
Slide 13 text
Isomorphic ͱͳʹ͔
Isomorphic
Client
Server
API
SSRͰϢʔβʔʹ͙͢ʹը໘͕ඳը͞Ε
Ϛϯτ͞Ε͔ͯΒSPAͱͯ͠ৼΔ͏
Slide 14
Slide 14 text
ΛSSR + SPAʹͰ͖ͨ
Slide 15
Slide 15 text
େنͳWeb
= bundle.jsͷංେԽ
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Code Splitting
Slide 18
Slide 18 text
Dynamic import
ʢstage-3ͷػೳͰ͢ʣ
Slide 19
Slide 19 text
Dynamic import
const main = () => {
const lib = import(“./lib”)
lib()
}
ඇಉظΛPromiseͰಡΈࠐΈ͢Δɻ
͜ΕʹΑͬͯɺbundle.jsʹrequire͢Δίʔυ͕ు͔ΕΔɻ
Slide 20
Slide 20 text
ϑΝΠϧαΠζͷܭଌ
import moment from “moment”
const getDate = () => {
return moment().format(“YYYY/MM/DD“)
}
export default getDate
ReactͰ͍͏ͱɺͦͷϖʔδͷίϯϙʔωϯτ
heavy.js
Slide 21
Slide 21 text
ϑΝΠϧαΠζͷܭଌ
import heavy from “./heavy”
const main = () => {
console.log(“Today is…”)
console.log(heavy())
}
main()
ී௨ʹimportͯ͠ɺ࣮ߦͯ͠ΈΔɻ
main.js
619KB
Slide 22
Slide 22 text
ϑΝΠϧαΠζͷܭଌ
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
Slide 23
Slide 23 text
Code splittingʹΑͬͯ
619KB -> 7.9KB
ʹϕʔεͷϑΝΠϧαΠζΛݮΒͤͨʂʂʂʂʂʂ
GitHubʹίʔυ্͍͛ͯ·͢ɻ
github.com/konojunya/dynamic-import-sample
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
·ͱΊ
SSRͱSPAͷྑ͍ͱ͜औΓΛ͠Α͏ʂ
> Isomorphic Web Application
ϕʔεͷbundle.jsΛখ͘͞͠Α͏ʂ
> dynamic importʢcode splittingʣ