DX(Developer Experience) x React x SPA 気持ちよく開発をするためのフロントエンド開発環境

Transcript

1. DX(Developer Experience) x React x SPA ؾ࣋ͪΑ͘։ൃΛ͢ΔͨΊͷϑϩϯτΤϯυ։ൃ؀ڥ Koh Nakagawa
3. อݥ୅ཧళ޲͚ͷސ٬؅ཧγεςϜΛ SPAͰ։ൃ͍ͯ͠·͢
4. Copyright ©2019 hokan, Inc. All rights reserved. େ·͔ͳϓϩμΫτ঺հ 4 -ސ٬؅ཧ -Ұཡ, ৄࡉ, ސ٬Ϛʔδ, ސ٬෮ݩ -ܖ໿؅ཧ -Ұཡ, ৄࡉ, ܖ໿Πϯϙʔτ -Todo؅ཧ -εέδϡʔϧ؅ཧ -ҙ޲೺Ѳ؅ཧ -ઃఆ, ࣮ࢪ, ؅ཧ -ΞϓϦέʔγϣϯઃఆ -άϧʔϓ؅ཧ, ϝϯόʔ؅ཧ, Ϛελ؅ཧ -…etc
5. ΞϓϦέʔγϣϯن໛͕ େ͖͘ͳΔʹͭΕͯ
6. ૿͑ͯ͘ΔComponent਺ atomicσβΠϯΛ࠾༻͍͕ͯͨ͠
 ࠶ར༻͞Ε͍ͯͨΓɺ͠ͳ͔ͬͨΓ͢ΔOrganismୡ
7. ґଘؔ܎΋ͺͬͱΈ෼͔Βͣɺຖ౓֬ೝ… ։ൃͷؾ࣋ͪྑ͞ ↘↘︎
8. ৳ͼ͖ͯͨBuild࣌ؒ - Production Build: 4෼൒
 - Development Build: 3෼
9. γϯϓϧʹਏ͍… ։ൃͷؾ࣋ͪྑ͞ ↘↘︎
10. ͳΜͱ͔͠Α͏
11. ~ ࠓ೔࿩͢͜ͱ ~ - σΟϨΫτϦߏ੒͔Βґଘؔ܎Λ໌֬ʹ - webpackͷύϑΥʔϚϯενϡʔχϯά - ͓·͚ - DLLόϯυϧͰ࢖༻ස౓ͷߴ͍ϥΠϒϥϦΛϏϧυର৅֎ʹ - redux-dynamic-modulesͰɺactionsɺreducer΋moduleʹ಺แ - aliasΛ࡞੒͠ɺimport࣌ͷύε஍ࠈΛεοΩϦ
12. ~ ࠓ೔࿩͢͜ͱ ~ - σΟϨΫτϦߏ੒͔Βґଘؔ܎Λ໌֬ʹ - webpackͷύϑΥʔϚϯενϡʔχϯά - ͓·͚ - DLLόϯυϧͰ࢖༻ස౓ͷߴ͍ϥΠϒϥϦΛϏϧυର৅֎ʹ - redux-dynamic-modulesͰɺactionsɺreducer΋moduleʹ಺แ - aliasΛ࡞੒͠ɺimport࣌ͷύε஍ࠈΛεοΩϦ
13. Copyright ©2019 hokan, Inc. All rights reserved. σΟϨΫτϦߏ੒ͷݟ௚͠ 13
14. Copyright ©2019 hokan, Inc. All rights reserved. σΟϨΫτϦߏ੒ͷݟ௚͠ 14
15. Copyright ©2019 hokan, Inc. All rights reserved. σΟϨΫτϦߏ੒ͷݟ௚͠ 15 ྫ͑͹ɺ͜ͷComponent
16. Copyright ©2019 hokan, Inc. All rights reserved. σΟϨΫτϦߏ੒ͷݟ௚͠ 16 ྫ͑͹ɺ͜ͷComponent ͜ͷComponentͰ͔͠࢖༻͞Ε͍ͯͳ͍
17. Copyright ©2019 hokan, Inc. All rights reserved. σΟϨΫτϦߏ੒ͷݟ௚͠ 17 ྫ͑͹ɺ͜ͷComponent ͜ͷComponentͰ͔͠࢖༻͞Ε͍ͯͳ͍ ͜ͷComponentͰ͔͠࢖༻͞Ε͍ͯͳ͍
18. Copyright ©2019 hokan, Inc. All rights reserved. σΟϨΫτϦߏ੒ͷݟ௚͠ 18 ྫ͑͹ɺ͜ͷComponent ͜ͷComponentͰ͔͠࢖༻͞Ε͍ͯͳ͍ ސ٬ҰཡϖʔδͰ͔͠࢖༻͍ͯ͠ͳ͍ ͜ͷComponentͰ͔͠࢖༻͞Ε͍ͯͳ͍
19. Copyright ©2019 hokan, Inc. All rights reserved. σΟϨΫτϦߏ੒ͷݟ௚͠ 19 ࠶ར༻͞Ε͍ͯͳ͍
20. Copyright ©2019 hokan, Inc. All rights reserved. σΟϨΫτϦߏ੒ͷݟ௚͠ 20 - ࠶ར༻ੑͷߴ͍atomsɺmoleculesɺorganisms…etc͸ packagesσΟϨΫτϦ഑Լͷcomponentsʹ·ͱΊͯɺ ଞϓϩδΣΫτͰ΋࢖͍ճͤΔΑ͏ʹ͢Δ - ΞϓϦέʔγϣϯґଘ͕ڧ͘࠶ར༻͕೉͍͠΋ͷ͸ ֤ػೳϞδϡʔϧ಺ʹ഑ஔ͢Δ - ࠶ར༻͞ΕΔ΋ͷɺ͞Εͳ͍ComponentΛ໌֬ʹ෼͚ ͯɺӨڹൣғͷେ͖͕͞഑ஔ͞Ε͍ͯΔσΟϨΫτϦ͔ Β΋൑அͰ͖ΔΑ͏ʹ͢Δ
21. Copyright ©2019 hokan, Inc. All rights reserved. σΟϨΫτϦߏ੒ͷݟ௚͠ 21 - ࠶ར༻ੑͷߴ͍atomsɺmoleculesɺorganisms…etc͸ packagesσΟϨΫτϦ഑Լͷcomponentsʹ·ͱΊͯɺ ଞϓϩδΣΫτͰ΋࢖͍ճͤΔΑ͏ʹ͢Δ - ΞϓϦέʔγϣϯґଘ͕ڧ͘࠶ར༻͕೉͍͠΋ͷ͸ ֤ػೳϞδϡʔϧ಺ʹ഑ஔ͢Δ - ࠶ར༻͞ΕΔ΋ͷɺ͞Εͳ͍ComponentΛ໌֬ʹ෼͚ ͯɺӨڹൣғͷେ͖͕͞഑ஔ͞Ε͍ͯΔσΟϨΫτϦ͔ Β΋൑அͰ͖ΔΑ͏ʹ͢Δ
22. Copyright ©2019 hokan, Inc. All rights reserved. σΟϨΫτϦߏ੒ͷݟ௚͠ 22 - ࠶ར༻ੑͷߴ͍atomsɺmoleculesɺorganisms…etc͸ packagesσΟϨΫτϦ഑Լͷcomponentsʹ·ͱΊͯɺ ଞϓϩδΣΫτͰ΋࢖͍ճͤΔΑ͏ʹ͢Δ - ΞϓϦέʔγϣϯґଘ͕ڧ͘࠶ར༻͕೉͍͠΋ͷ͸ ֤ػೳϞδϡʔϧ಺ʹ഑ஔ͢Δ - ࠶ར༻͞ΕΔ΋ͷɺ͞Εͳ͍ComponentΛ໌֬ʹ෼͚ ͯɺӨڹൣғͷେ͖͕͞഑ஔ͞Ε͍ͯΔσΟϨΫτϦ͔ Β΋൑அͰ͖ΔΑ͏ʹ͢Δ
23. Copyright ©2019 hokan, Inc. All rights reserved. σΟϨΫτϦߏ੒ͷݟ௚͠ 23 - ࠶ར༻ੑͷߴ͍atomsɺmoleculesɺorganisms…etc͸ packagesσΟϨΫτϦ഑Լͷcomponentsʹ·ͱΊͯɺ ଞϓϩδΣΫτͰ΋࢖͍ճͤΔΑ͏ʹ͢Δ - ΞϓϦέʔγϣϯґଘ͕ڧ͘࠶ར༻͕೉͍͠΋ͷ͸ ֤ػೳϞδϡʔϧ಺ʹ഑ஔ͢Δ - ࠶ར༻͞ΕΔ΋ͷɺ͞Εͳ͍ComponentΛ໌֬ʹ෼͚ ͯɺӨڹൣғͷେ͖͕͞഑ஔ͞Ε͍ͯΔσΟϨΫτϦ͔ Β΋൑அͰ͖ΔΑ͏ʹ͢Δ
24. Copyright ©2019 hokan, Inc. All rights reserved. σΟϨΫτϦߏ੒ͷݟ௚͠ 24 - ࠶ར༻ੑͷߴ͍atomsɺmoleculesɺorganisms…etc͸ packagesσΟϨΫτϦ഑Լͷcomponentsʹ·ͱΊͯɺ ଞϓϩδΣΫτͰ΋࢖͍ճͤΔΑ͏ʹ͢Δ - ΞϓϦέʔγϣϯґଘ͕ڧ͘࠶ར༻͕೉͍͠΋ͷ͸ ֤ػೳϞδϡʔϧ಺ʹ഑ஔ͢Δ - ࠶ར༻͞ΕΔ΋ͷɺ͞Εͳ͍ComponentΛ໌֬ʹ෼͚ ͯɺӨڹൣғͷେ͖͕͞഑ஔ͞Ε͍ͯΔσΟϨΫτϦ͔ Β΋൑அͰ͖ΔΑ͏ʹ͢Δ ސ٬ҰཡϖʔδͰ͔͠࢖༻͍ͯ͠ͳ͍ Componentͨͪ͸͜͜
25. ~ ࠓ೔࿩͢͜ͱ ~ - σΟϨΫτϦߏ੒͔Βґଘؔ܎Λ໌֬ʹ - webpackͷύϑΥʔϚϯενϡʔχϯά - ͓·͚ - DLLόϯυϧͰ࢖༻ස౓ͷߴ͍ϥΠϒϥϦΛϏϧυର৅֎ʹ - redux-dynamic-modulesͰɺactionsɺreducer΋moduleʹ಺แ - aliasΛ࡞੒͠ɺimport࣌ͷύε஍ࠈΛεοΩϦ
26. Copyright ©2019 hokan, Inc. All rights reserved. webpackͷύϑΥʔϚϯενϡʔχϯά 26 1ճ໨ 2ճ໨ 3ճ໨ Production Build 4:51.91 2:31.80 2:28.97 Development Build 3:02.79 1:28.87 1:38.34 Before
27. Copyright ©2019 hokan, Inc. All rights reserved. webpackͷύϑΥʔϚϯενϡʔχϯά 27 1ճ໨ 2ճ໨ 3ճ໨ Production Build 4:51.91 2:31.80 2:28.97 Development Build 3:02.79 1:28.87 1:38.34 Before Chunk਺ଟ͘ͳΔͱɺ ϏϧυύϑΥʔϚϯε͓ͪΔΑ
28. Copyright ©2019 hokan, Inc. All rights reserved. webpackͷύϑΥʔϚϯενϡʔχϯά 28 1ճ໨ 2ճ໨ 3ճ໨ Production Build 4:51.91 → 3:35.98 2:31.80 → 1:43.90 2:28.97 → 1:39.57 Development Build 3:02.79 → 2:03.73 1:28.87 → 1:06.30 1:38.34 → 1:07.52 After: ػೳϞδϡʔϧ͝ͱʹCodeSpliteͱLazyLoad - ෆཁͳCodeSplite͞Ε͍ͯͨ෦෼Λमਖ਼: 52 js chunks → 23 js chunks
29. Copyright ©2019 hokan, Inc. All rights reserved. webpackͷύϑΥʔϚϯενϡʔχϯά 29 1ճ໨ 2ճ໨ 3ճ໨ Production Build 3:08.93 1:39.87 1:00.54 Development Build 2:04.49 1:06.30 → 00:28.78 1:07.52 → 00:25.93 After: HardSourceWebpackPluginͷಋೖͱCacheGroupઃఆ -Ϗϧυ݁ՌΛHardSourceWebpackPlugin΍CacheGroupͰcache
30. Copyright ©2019 hokan, Inc. All rights reserved. webpackͷύϑΥʔϚϯενϡʔχϯά 30 1ճ໨ 2ճ໨ 3ճ໨ Production Build 3:08.93 1:39.87 1:00.54 Development Build 2:04.49 00:28.78 00:25.93 After: HardSourceWebpackPluginͷಋೖͱCacheGroupઃఆ 1ճ໨ 2ճ໨ 3ճ໨ Production Build 4:51.91 2:31.80 2:28.97 Development Build 3:02.79 1:28.87 1:38.34 Before
31. Copyright ©2019 hokan, Inc. All rights reserved. webpackͷύϑΥʔϚϯενϡʔχϯά 31 1ճ໨ 2ճ໨ 3ճ໨ Production Build 3:08.93 1:39.87 1:00.54 Development Build 2:04.49 00:28.78 00:25.93 After: HardSourceWebpackPluginͷಋೖͱCacheGroupઃఆ 1ճ໨ 2ճ໨ 3ճ໨ Production Build 4:51.91 2:31.80 2:28.97 Development Build 3:02.79 1:28.87 1:38.34 Before
32. Copyright ©2019 hokan, Inc. All rights reserved. webpackͷύϑΥʔϚϯενϡʔχϯά 32 1ճ໨ 2ճ໨ 3ճ໨ Production Build 3:08.93 1:39.87 1:00.54 Development Build 2:04.49 00:28.78 00:25.93 After: HardSourceWebpackPluginͷಋೖͱCacheGroupઃఆ 1ճ໨ 2ճ໨ 3ճ໨ Production Build 4:51.91 2:31.80 2:28.97 Development Build 3:02.79 1:28.87 1:38.34 Before
33. Copyright ©2019 hokan, Inc. All rights reserved. webpackͷύϑΥʔϚϯενϡʔχϯά 33 1ճ໨ 2ճ໨ 3ճ໨ Production Build 3:08.93 1:39.87 1:00.54 Development Build 2:04.49 00:28.78 00:25.93 After: HardSourceWebpackPluginͷಋೖͱCacheGroupઃఆ 1ճ໨ 2ճ໨ 3ճ໨ Production Build 4:51.91 2:31.80 2:28.97 Development Build 3:02.79 1:28.87 1:38.34 Before
34. ~ ͓·͚ ~ - DLLόϯυϧͰ࢖༻ස౓ͷߴ͍ϥΠϒϥϦΛϏϧυର৅֎ʹ - redux-dynamic-modulesͰɺactionsɺreducer΋moduleʹ಺แ - aliasΛ࡞੒͠ɺimport࣌ͷύε஍ࠈΛεοΩϦ
35. ࠂ஌
37. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠