Upgrade to Pro — share decks privately, control downloads, hide ads and more …

大規模なWebの開発手法

 大規模なWebの開発手法

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

E654ce93d23159c059fa5cf1b1347bfa?s=128

Kono Junya

May 29, 2018
Tweet

More Decks by Kono Junya

Other Decks in Technology

Transcript

  1. େن໛ͳWebͷ։ൃख๏ By Junya Kono

  2. ໊લ: Տ໺ ७໵ʢί΢ϊ δϡϯϠʣ
 χοΫωʔϜ: ͡ΎΜ͡ΎΜ ֶߍ: HALେࡕITֶ෦Web։ൃֶՊ झຯ: ϘϧμϦϯάɺಡॻ

  3. ࠷ۙͷྲྀߦΓͷٕज़

  4. ࠷ۙͷྲྀߦΓͷٕज़

  5. ࠓճ࠾༻ٕͨ͠ज़

  6. SPA͸ॳճϩʔυ͕஗͍ɻ

  7. ΛSSRΛ͍ͨ͠ɻ

  8. Ͱ΋ɺભҠͱؚ͔Ίͯ SPAͷྑ͞΋׆͔͍ͨ͠ɻ

  9. ΛSPAʹ͍ͨ͠ɻ

  10. None
  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ͷංେԽ

  16. None
  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

  24. None
  25. ·ͱΊ SSRͱSPAͷྑ͍ͱ͜औΓΛ͠Α͏ʂ > Isomorphic Web Application ϕʔεͷbundle.jsΛখ͘͞͠Α͏ʂ > dynamic importʢcode

    splittingʣ