1. ทำไมต้องเพิ่มประสิทธิภาพ?

การเพิ่มประสิทธิภาพช่วยให้แอปพลิเคชัน Vue.js ของคุณทำงานได้รวดเร็วและตอบสนองต่อผู้ใช้ได้ดียิ่งขึ้น โดยเฉพาะในแอปพลิเคชันขนาดใหญ่หรือมีผู้ใช้งานจำนวนมาก

2. การใช้ Production Mode

ตรวจสอบให้แน่ใจว่าแอปพลิเคชันของคุณทำงานในโหมด Production ซึ่งจะปิดการแจ้งเตือนการ Debug และเพิ่มประสิทธิภาพให้กับแอปพลิเคชัน

คำสั่งสำหรับ Production Build:

npm run build

3. การจัดการ Component Rendering

3.1 การใช้ v-if แทน v-show

• ใช้ v-if สำหรับการแสดง/ซ่อนที่ขึ้นอยู่กับเงื่อนไขหนัก เช่น การโหลดข้อมูลจาก API
• ใช้ v-show สำหรับการแสดง/ซ่อนที่เกิดขึ้นบ่อย ๆ

<template>
  <div>
    <p v-if="isLoaded">Data Loaded</p>
  </div>
</template>

3.2 การใช้ Key ในลูป

การเพิ่ม :key ใน v-for ช่วยให้ Vue.js จัดการ DOM ได้อย่างมีประสิทธิภาพมากขึ้น

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

4. การ Lazy Load Component

การใช้ Lazy Loading ช่วยลดขนาดไฟล์ JavaScript ที่โหลดในครั้งแรก

ตัวอย่าง:

const LazyComponent = () => import('@/components/LazyComponent.vue');

<template>
  <Suspense>
    <template #default>
      <LazyComponent />
    </template>
    <template #fallback>
      <p>Loading...</p>
    </template>
  </Suspense>
</template>

5. การจัดการ State อย่างมีประสิทธิภาพ

5.1 ใช้ Vuex อย่างเหมาะสม

• แยก State ที่ไม่จำเป็นต้องใช้ร่วมกันออกจาก Vuex Store
• ใช้ Modules เพื่อแยกความรับผิดชอบ

5.2 ใช้ Composition API

ใช้ Composition API สำหรับ State และ Logic ที่สามารถ Reuse ได้ง่าย

import { ref } from 'vue';
export default function useCounter() {
  const count = ref(0);
  const increment = () => count.value++;
  return { count, increment };
}

6. การใช้ CDN สำหรับ Static Assets

โหลดไลบรารี เช่น Vue.js หรือ CSS Framework ผ่าน CDN เพื่อเพิ่มความเร็วในการโหลด

ตัวอย่าง:

<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>

7. การลดขนาดไฟล์ JavaScript และ CSS

7.1 การเปิดใช้งาน Tree Shaking

ตรวจสอบให้แน่ใจว่า Webpack หรือ Vite กำลังใช้งาน Tree Shaking เพื่อลดขนาดไฟล์

7.2 การ Minify ไฟล์

Vue CLI และ Vite จะ Minify ไฟล์โดยอัตโนมัติในโหมด Production

8. การใช้ Cache และ Service Worker

8.1 เปิดใช้งาน Cache-Control

ตั้งค่าหัวข้อ HTTP Cache-Control บน Web Server เพื่อจัดการการ Cache

8.2 ใช้ PWA Plugin

ใช้ Progressive Web App (PWA) Plugin เพื่อเพิ่มความสามารถ Offline

npm install @vue/cli-plugin-pwa

9. การตรวจสอบประสิทธิภาพ

9.1 Chrome DevTools

ใช้ Tab “Performance” ใน Chrome DevTools เพื่อตรวจสอบการโหลดและการทำงานของ DOM

9.2 Lighthouse

ใช้ Lighthouse ใน Chrome DevTools เพื่อตรวจสอบคะแนนประสิทธิภาพและคำแนะนำในการปรับปรุง

9.3 Vue DevTools

ใช้ Vue DevTools เพื่อตรวจสอบ State และ Event ของ Component

10. สรุป

ในบทนี้ คุณได้เรียนรู้เกี่ยวกับวิธีการเพิ่มประสิทธิภาพแอปพลิเคชัน Vue.js รวมถึงการปรับปรุงการ Render, การจัดการ State, การลดขนาดไฟล์, และการใช้เครื่องมือสำหรับตรวจสอบประสิทธิภาพ

ในบทถัดไป เราจะศึกษาวิธีการทำงานร่วมกันกับ API และ Backend อย่างมีประสิทธิภาพ!