大規模なWebの開発手法

vsLTというLTイベントで話をしたスライドになります。
isomorphicの話とcode splittingの話をしました。

Transcript

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