$30 off During Our Annual Pro Sale. View Details »

Vue.js Performance Tips / #v_kansai 11

Vue.js Performance Tips / #v_kansai 11

v-kansai Vue.js/Nuxt Meetup #11 (京都Devかふぇ共催)でVue.jsのパフォーマンスに関する発表を行いました。

https://vuekansai.connpass.com/event/144194/

# 参考にした記事
- 超速! Webページ速度改善ガイド(WEB+DB PRESS plus)
- https://www.amazon.co.jp/dp/477419400X
- Web Fundamentals | Google Developers
- https://developers.google.com/web/fundamentals
- Vue.js App Performance Optimization – A Tutorial Series
- https://madewithvuejs.com/blog/vue-js-app-performance-optimization-a-tutorial-series-via-itnext
- How to Drastically Reduce Estimated Input Latency and Time to Interactive of SSR Vue.js Applications
- https://markus.oberlehner.net/blog/how-to-drastically-reduce-estimated-input-latency-and-time-to-interactive-of-ssr-vue-applications/
- Progressive Hydration #react_fukuoka - Speaker Deck
- https://speakerdeck.com/pirosikick/progressive-hydration-number-react-fukuoka

Masashi Hirano

October 09, 2019
Tweet

More Decks by Masashi Hirano

Other Decks in Programming

Transcript

  1. ύϑΥʔϚϯεͷվળʹ͸ܭଌ͕ॏཁ • Measure, Don’t Guess (ਪଌ͢ΔͳɺܭଌͤΑ) • ݱঢ়ΛՄࢹԽͯ͠ϘτϧωοΫΛݟ͚ͭΔ • Chrome

    DevToolsɺLighthouseɺWebPageTestͳͲศརͳ πʔϧ͕͋Δ • User Timing APIͳͲͰݸผͷॲཧΛܭଌ
  2. User Timing API // ܭଌ։࢝ͷϚʔΫ performance.mark(“A"); heavyTask(); // ܭଌऴྃͷϚʔΫ performance.mark(“B");

    // “heavy task”ͱ͍͏໊લͰ”A”ͱ”B”ͷؒͷ࣌ؒΛܭଌ performance.measure("heavy task", "A", "B");
  3. Vue.config.performance • ίϯϙʔωϯτ͝ͱͷॲཧ࣌ؒΛܭଌ • தͰUser Timing API͕࢖ΘΕ͍ͯΔ const isDev =

    process.env.NODE_ENV !== “production"; Vue.config.performance = isDev; // trueͰܭଌ͞ΕΔ new Vue({ router, store, render: h => h(App) }).$mount("#app");
  4. JavaScriptͷ෼ׂɾ஗ԆಡΈࠐΈ import Home from ‘./Home.vue’ import About from ‘./About.vue’ const

    router = new VueRouter({ routes: [ { path: '/', component: Home }, { path: ‘/about', component: About }, ] }) ੩తͳimport
  5. JavaScriptͷ෼ׂɾ஗ԆಡΈࠐΈ const router = new VueRouter({ routes: [ {path: '/',component:

    () => import('./Home.vue')}, {path: '/about',component: () => import('./About.vue')}, ] }) ಈతͳimportʹ͢Δ͜ͱͰ ෼ׂ͢Δ͜ͱ͕Ͱ͖Δ
  6. JavaScriptͷ෼ׂɾ஗ԆಡΈࠐΈ "QQWVF )PNFWVF "CPVUWVF FOUSZKT 7VF WVF SPVUFS SPVUFSKT BQJKT

    BYJPT BQQKT IPNFKT BCPVUKT ࠷ॳ͸app.js͚ͩಡΈࠐΈɺ࣮ߦ࣌ʹ ෼ׂͨ͠ίʔυΛϩʔυ͢Δ
  7. v-lazy-image import Vue from "vue"; import { VLazyImagePlugin } from

    "v-lazy-image"; import App from "./src/App"; Vue.use(VLazyImagePlugin); new Vue({ el: "#app", render: h => h(App) }); Vue.useʹ౉͢͜ͱͰͲͷίϯϙʔω ϯτͰ΋࢖͑ΔΑ͏ʹͳΔ
  8. vue-lazy-hydration <template> <div> <LazyHydrate when-visible> <SomeComponent/> </LazyHydrate> </div> </template> <script>

    import LazyHydrate from 'vue-lazy- hydration'; export default { components: { LazyHydrate, SomeComponent: () => import('./SomeComponent.vue'), }, // ... }; </script>
  9. <LazyHydrate when-idle> <ImageSlider/> </LazyHydrate> <LazyHydrate ssr-only> <ArticleContent :content="article.content"/> </LazyHydrate> <LazyHydrate

    when-visible> <AdSlider/> </LazyHydrate> <LazyHydrate :on-interaction="['focus', 'hover']"> <CommentForm :article-id="article.id"/> </LazyHydrate> ϒϥ΢β͕ΞΠυϧঢ়ଶʹͳͬ ͨͱ͖ʹhydration
  10. <LazyHydrate when-idle> <ImageSlider/> </LazyHydrate> <LazyHydrate ssr-only> <ArticleContent :content="article.content"/> </LazyHydrate> <LazyHydrate

    when-visible> <AdSlider/> </LazyHydrate> <LazyHydrate :on-interaction="['focus', 'hover']"> <CommentForm :article-id="article.id"/> </LazyHydrate> SSRͰͷΈॲཧ͢Δ
  11. <LazyHydrate when-idle> <ImageSlider/> </LazyHydrate> <LazyHydrate ssr-only> <ArticleContent :content="article.content"/> </LazyHydrate> <LazyHydrate

    when-visible> <AdSlider/> </LazyHydrate> <LazyHydrate :on-interaction="['focus', 'hover']"> <CommentForm :article-id="article.id"/> </LazyHydrate> viewportʹೖ͖ͬͯͨΒhydration
  12. <LazyHydrate when-idle> <ImageSlider/> </LazyHydrate> <LazyHydrate ssr-only> <ArticleContent :content="article.content"/> </LazyHydrate> <LazyHydrate

    when-visible> <AdSlider/> </LazyHydrate> <LazyHydrate :on-interaction="['focus', 'hover']"> <CommentForm :article-id="article.id"/> </LazyHydrate> ίϯϙʔωϯτʹରͯ͠ ૢ࡞ͨ͠ͱ͖hydration e.g. focusɺhover
  13. requestIdleCallback // 1ඵܦͬͯίʔϧόοΫ͕࣮ߦ͞Εͳ͚Ε͹λΠϜΞ΢τ const requestId = requestIdleCallback(() => { //

    ΞΠυϧঢ়ଶʹͳΕ͹࣮ߦ heavyTask(); }, {timeout: 1000}); // Ωϟϯηϧ͢Δ͜ͱ΋Մೳ cancelIdleCallback(requestId);
  14. IntersectionObserver const observer = new IntersectionObserver(entries => { const entry

    = entries[0]; if (entry.intersectionRatio > 0) { enterTask(); // ཁૉ͕ը໘಺ʹೖͬͨͱ͖ } else { exitTask(); // ཁૉ͕ը໘಺ʹग़ͨͱ͖ } }); observer.observe(document.querySelector("#target"));
  15. ࢀߟ • ௒଎! Webϖʔδ଎౓վળΨΠυ(WEB+DB PRESS plus) • Web Fundamentals |

    Google Developers • Vue.js App Performance Optimization – A Tutorial Series • How to Drastically Reduce Estimated Input Latency and Time to Interactive of SSR Vue.js Applications • Progressive Hydration #react_fukuoka - Speaker Deck