Dev to webs {Coding…}

เรียนรู้การพัฒนาซอฟเวอร์ เพื่อความรู้ที่ยั่งยืน

บทที่ 35: การเพิ่มประสิทธิภาพการทำงานใน Vue.js สำหรับแอปพลิเคชันขนาดใหญ่

1. ทำไมการเพิ่มประสิทธิภาพจึงสำคัญ?

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

2. การจัดการการโหลด Component

2.1 ใช้ Lazy Loading

Lazy Loading ช่วยโหลดเฉพาะ Component ที่จำเป็นเมื่อผู้ใช้ต้องการใช้งาน

ตัวอย่างการตั้งค่า Lazy Loading ใน Vue Router:

const routes = [
  {
    path: '/about',
    component: () => import('@/views/About.vue')
  }
];

2.2 ใช้ Dynamic Import

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

ตัวอย่างการใช้งาน:

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

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

3.1 ใช้ Vuex หรือ Pinia

การจัดการ State แบบรวมศูนย์ช่วยลดการส่งผ่าน Props ระหว่าง Component หลายชั้น

ตัวอย่างการตั้งค่า Vuex:

import { createStore } from 'vuex';

const store = createStore({
  state: {
    user: null
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    }
  }
});

export default store;

3.2 ใช้ Composition API

Composition API ช่วยให้จัดการ State ใน Component ได้ง่ายและยืดหยุ่นมากขึ้น

ตัวอย่าง:

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    return { count, increment };
  }
};

4. การปรับปรุง DOM และ Rendering

4.1 ใช้ Key ใน v-for

การเพิ่ม Key ช่วยให้ Vue จัดการ DOM ได้อย่างมีประสิทธิภาพ

ตัวอย่าง:

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

4.2 ใช้ v-once สำหรับ Element ที่ไม่เปลี่ยนแปลง

v-once บอก Vue ให้ Render Element เพียงครั้งเดียว

ตัวอย่าง:

<h1 v-once>Welcome to Vue.js</h1>

4.3 ใช้ Keep-Alive สำหรับ Component ที่เปลี่ยนบ่อย

<keep-alive> ช่วยเก็บสถานะของ Component ที่เปลี่ยนไปมา

ตัวอย่าง:

<keep-alive>
  <router-view />
</keep-alive>

5. การลดขนาดไฟล์และการโหลด

5.1 เปิดใช้งาน Tree Shaking

Tree Shaking ช่วยลบโค้ดที่ไม่ได้ใช้งานออกจากไฟล์ JavaScript

ตัวอย่างการตั้งค่าใน Webpack:

module.exports = {
  optimization: {
    usedExports: true
  }
};

5.2 ใช้ Code Splitting

Code Splitting ช่วยแบ่งไฟล์ JavaScript ออกเป็นส่วนย่อยเพื่อลดเวลาโหลด

5.3 ใช้ Gzip หรือ Brotli

การบีบอัดไฟล์ช่วยลดขนาดข้อมูลที่ส่งไปยังเบราว์เซอร์

ตัวอย่างการตั้งค่าใน Nginx:

gzip on;
gzip_types text/plain application/javascript application/json text/css;

6. การใช้ Cache

6.1 เปิดใช้งาน Browser Cache

การตั้งค่า Cache-Control ใน HTTP Headers ช่วยเก็บไฟล์ Static บนเบราว์เซอร์

ตัวอย่าง:

location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|otf|eot)$ {
  expires 6M;
  add_header Cache-Control "public";
}

6.2 ใช้ Service Worker

Service Worker ช่วยเก็บไฟล์ไว้ใน Cache เพื่อให้ใช้งานได้แม้ไม่มีอินเทอร์เน็ต

ตัวอย่างการตั้งค่า Service Worker:

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('my-cache').then((cache) => {
      return cache.addAll(['/index.html', '/css/style.css', '/js/app.js']);
    })
  );
});

7. การตรวจสอบและปรับปรุง

7.1 ใช้ Chrome DevTools

  • Tab “Performance” สำหรับตรวจสอบการทำงานของ DOM และ JavaScript
  • Tab “Lighthouse” สำหรับประเมินประสิทธิภาพและ SEO

7.2 ใช้ Vue DevTools

Vue DevTools ช่วยวิเคราะห์ State และ Event ในแอปพลิเคชัน

8. สรุป

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

ในบทถัดไป เราจะพูดถึงการปรับแต่ง UI/UX ในแอปพลิเคชัน Vue.js เพื่อสร้างประสบการณ์ผู้ใช้ที่ดีขึ้น!