Nuxt.jsのビルドを高速化する為に頑張った話

Nuxt.jsのビルドを高速化する為に頑張った話

Transcript

1. Nuxt.jsのビルドを高速化するҝに 頑張った話 鈴木孝之
2. "HFOEB ࣗݾ঺հɾձࣾ঺հ
   8FCQBDL
   #VOEMF
   "OBMZ[FSͱ͸ʁ
   ݱঢ়ͷ՝୊ͱվળ఺
3. ࣗݾ঺հɾձࣾ঺հ
4. 0.ࣗݾ঺հ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ※ಉ੏ಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ ◆ࣗݾ঺հ ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥ʹಠཱɻ ɾݱࡏ͸ɺडୗ։ൃΛ΍ΓͭͭɺࣗࣾWebαʔϏεΛ։ൃதɻ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓ ◆εΩϧ PHP,Symfony2,CakePHP3,Laravel5, JavaScript,backbone.js,Angular.js
5. Copyright Re:Build.inc All Rights Reserved. ձࣾ঺հ ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝԭೄࢢதԝ̍ஸ໨̍̒−̕ ◆ࣄۀ಺༰ ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ 6໊ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪ঑ͯ͠·͢ʂ
6. 6 ࣗࣾWebαʔϏεͷ։ൃ ɾαʔϏε໊ Tadoru
 https://tadoru.work/
 
 ɾγεςϜ֓ཁ ΤϯδχΞಛԽܕͷ ϦϑΝϥϧ Ϋϥ΢υιʔγϯά
7. 8FCQBDL
   #VOEMF
   "OBMZ[FSͱ͸ʁ
8. 8FCQBDL
   #VOEMF
   "OBMZ[FSͱ͸ʁ ԼهΛՄࢹԽͯ͘͠ΕΔɻ ɾwebpackͷ଎౓վળͷҝɺ஗͍ loader΍pluginΛ஌Γ͍ͨ ɾόϯυϧϑΝΠϧͷαΠζΛݮ Β͍ͨ͠ͷͰɺόϯυϧϑΝΠϧ ಺ͷ֤ύοέʔδ͕Ͳͷ͘Β͍ͷ ༰ྔΛ઎Ί͍ͯΔ͔஌Γ͍ͨ https://github.com/webpack-contrib/webpack-bundle-analyzer
9. ࣮ߦํ๏
10. 8FCQBDL
    #VOEMF
    "OBMZ[FSͱ͸ʁ https://qiita.com/kurosame/items/9e7092cdf08ff2ba7500
11. ݱঢ়ͷ՝୊ͱվળ఺
12. ݱঢ়ͷ՝୊ ᶃChart.js͕ॏ͍ ᶄmoment.js͕ॏ͍ - locale͕ແବʹଟ͍ ᶅlodash.js͕ॏ͍
13. ᶃChart.js͕ॏ͍ ɾvue-chart.jsͷґଘؔ܎ʹ͋ΔͷͰɺ֎ ͢ͷ͸೉ͦ͠͏ͩͬͨɻ
14. ᶄmoment.js͕ॏ͍ nuxt.config.jsʹmomentͷ ઃఆΛ௥Ճ
15. ᶅlodash.js͕ॏ͍ ɾݱঢ়ɺσΟʔϓίϐʔͷ Օॴʹ͔͠lodash.js͕࢖Θ Ε͍ͯͳ͔ͬͨ
16. ᶅlodash.js͕ॏ͍ https://kuroeveryday.blogspot.com/2017/05/deep-clone-object-in-javascript.html ੜͷJSͰ΋σΟʔϓίϐʔ Ͱ͖Δ
17. ᶅlodash.js͕ॏ͍ https://qiita.com/hareku/items/d9f92c96697163356bd3 lodashΛimport _ from 'lodash'ͷΑ͏ʹಡΈࠐΜͰ ͠·͏ͱɺશͯͷlodashؔ਺ͳͲ͕bundle͞Εͯ ͠·͍·͢ɻ ͦΕΛճආ͢ΔͨΊɺ࢖༻͢Δؔ਺ͷΈΛimport ͢ΔΑ͏ʹมߋ͠·͢ɻ
18. վળ݁Ռ chart.jsͱmoment.js͸ ΄΅ফ͑ͨʂ
19. ·ͱΊ
    
20. ·ͩ·ͩվળ͸ग़དྷͦ͏ʂ ·ͱΊ