1. ความสำคัญของการจัดการการแคชและเพิ่มประสิทธิภาพการโหลด

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

2. การใช้ Cache-Control และ ETag

2.1 การตั้งค่า Cache-Control

Cache-Control Header ช่วยควบคุมการแคชใน Browser และ Proxy Server

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

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

2.2 การใช้ ETag

ETag ช่วยตรวจสอบว่าไฟล์มีการเปลี่ยนแปลงหรือไม่ โดย Browser จะโหลดไฟล์ใหม่เฉพาะเมื่อมีการเปลี่ยนแปลง

การเปิดใช้งานใน Nginx:

location / {
  etag on;
}

3. การใช้ Service Worker สำหรับการแคช

Service Worker ช่วยแคชไฟล์ Static และทำให้แอปพลิเคชันทำงานได้แม้ไม่มีอินเทอร์เน็ต (Offline-First)

3.1 การติดตั้ง Workbox:

npm install workbox-webpack-plugin --save-dev

3.2 การตั้งค่า Workbox ใน Webpack:

const { GenerateSW } = require('workbox-webpack-plugin');

module.exports = {
  plugins: [
    new GenerateSW({
      clientsClaim: true,
      skipWaiting: true
    })
  ]
};

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

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js').then((registration) => {
    console.log('Service Worker registered with scope:', registration.scope);
  }).catch((error) => {
    console.error('Service Worker registration failed:', error);
  });
}

4. การแบ่งโหลดด้วย Lazy Loading และ Code Splitting

4.1 Lazy Loading

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

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

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

4.2 Code Splitting

Code Splitting ช่วยแบ่งไฟล์ JavaScript ออกเป็นส่วนย่อยเพื่อลดขนาดไฟล์ที่โหลดในครั้งแรก

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

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

5. การแคชข้อมูลด้วย Vuex หรือ Pinia

5.1 การแคชข้อมูลใน Vuex

ตัวอย่าง:

const store = {
  state: {
    cachedData: null
  },
  mutations: {
    setCachedData(state, data) {
      state.cachedData = data;
    }
  },
  actions: {
    async fetchData({ commit, state }) {
      if (state.cachedData) {
        return state.cachedData;
      }
      const response = await fetch('/api/data');
      const data = await response.json();
      commit('setCachedData', data);
      return data;
    }
  }
};

5.2 การใช้ Pinia

ตัวอย่าง:

import { defineStore } from 'pinia';

export const useDataStore = defineStore('data', {
  state: () => ({
    cachedData: null
  }),
  actions: {
    async fetchData() {
      if (this.cachedData) {
        return this.cachedData;
      }
      const response = await fetch('/api/data');
      const data = await response.json();
      this.cachedData = data;
      return data;
    }
  }
});

6. การบีบอัดไฟล์ด้วย Gzip และ Brotli

การบีบอัดไฟล์ช่วยลดขนาดไฟล์ที่ต้องส่งไปยัง Browser และเพิ่มความเร็วในการโหลด

การเปิดใช้งาน Gzip ใน Nginx:

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

การเปิดใช้งาน Brotli ใน Nginx:

brotli on;
brotli_types text/plain application/javascript application/json text/css;

7. การใช้ Content Delivery Network (CDN)

CDN ช่วยกระจายไฟล์ Static ไปยัง Server หลายแห่งทั่วโลกเพื่อลดเวลาโหลดสำหรับผู้ใช้ในพื้นที่ต่าง ๆ

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

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

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

8.1 ใช้ Chrome DevTools

• Tab “Performance” สำหรับวิเคราะห์การโหลดหน้าเว็บ
• Tab “Network” สำหรับตรวจสอบการแคชและขนาดไฟล์

8.2 ใช้ Lighthouse

• Lighthouse ช่วยประเมินประสิทธิภาพและแนะนำวิธีปรับปรุง

9. สรุป

ในบทนี้ คุณได้เรียนรู้เทคนิคขั้นสูงในการจัดการการแคชและเพิ่มประสิทธิภาพการโหลดใน Vue.js เช่น การใช้ Cache-Control, Lazy Loading, Service Worker และ CDN เทคนิคเหล่านี้ช่วยให้แอปพลิเคชันโหลดเร็วขึ้นและตอบสนองต่อผู้ใช้ได้ดียิ่งขึ้น

ในบทถัดไป เราจะสำรวจแนวทางการพัฒนาแอปพลิเคชัน Vue.js ในลักษณะของ Micro-Frontend!