กลยุทธ์การปรับปรุงประสิทธิภาพ JavaScript Bundle: เทคนิค Code Splitting ขั้นสูง

module.exports = {
  entry: {
    index: './src/index.js',
    about: './src/about.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Products = lazy(() => import('./pages/Products'));

function App() {
  return (
    
      Loading...

ในตัวอย่างนี้ คอมโพเนนต์ `Home`, `About` และ `Products` จะถูกโหลดแบบไดนามิกโดยใช้ `React.lazy()` คอมโพเนนต์ `Suspense` จะแสดง UI สำรอง (ตัวบ่งชี้การโหลด) ในขณะที่คอมโพเนนต์กำลังถูกโหลด สิ่งนี้ช่วยให้แน่ใจว่าผู้ใช้จะไม่เห็นหน้าจอว่างเปล่าขณะรอให้โค้ดดาวน์โหลด ตอนนี้หน้าเหล่านี้ถูกแบ่งออกเป็น chunk แยกและจะโหลดเมื่อมีการไปยัง Route ที่เกี่ยวข้องเท่านั้น

เทคนิค Code Splitting ขั้นสูง

นอกเหนือจากประเภทพื้นฐานของ Code Splitting แล้ว ยังมีเทคนิคขั้นสูงอีกหลายอย่างที่สามารถเพิ่มประสิทธิภาพ JavaScript bundle ของคุณได้อีก

1. การแยก Vendor (Vendor Splitting)

Vendor splitting คือการแยกไลบรารีของบุคคลที่สาม (เช่น React, Angular, Vue.js) ออกเป็น bundle แยกต่างหาก เนื่องจากไลบรารีเหล่านี้มีแนวโน้มที่จะเปลี่ยนแปลงไม่บ่อยนักเมื่อเทียบกับโค้ดแอปพลิเคชันของคุณ จึงสามารถแคชโดยเบราว์เซอร์ได้อย่างมีประสิทธิภาพมากขึ้น

ตัวอย่าง (Webpack):

module.exports = {
  // ... other configurations
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

การกำหนดค่า Webpack นี้จะสร้าง bundle แยกชื่อ `vendors.bundle.js` ซึ่งมีโค้ดทั้งหมดจากไดเรกทอรี `node_modules`

2. การสกัดส่วนโค้ดที่ใช้ร่วมกัน (Common Chunk Extraction)

การสกัดส่วนโค้ดที่ใช้ร่วมกันจะระบุโค้ดที่ใช้ร่วมกันระหว่างหลาย bundle และสร้าง bundle แยกสำหรับโค้ดที่ใช้ร่วมกันนั้น ซึ่งจะช่วยลดความซ้ำซ้อนและปรับปรุงประสิทธิภาพการแคช

ตัวอย่าง (Webpack): module.exports = { // ... other configurations optimization: { splitChunks: { chunks: 'all', minSize: 20000, // ขนาดต่ำสุด (เป็นไบต์) สำหรับการสร้าง chunk maxAsyncRequests: 30, // จำนวนคำขอพร้อมกันสูงสุดเมื่อโหลดตามความต้องการ maxInitialRequests: 30, // จำนวนคำขอพร้อมกันสูงสุดที่ entry point automaticNameDelimiter: '~', cacheGroups: { defaultVendors: { test: /[\\/]node_modules[\\/]/, priority: -10 }, default: { minChunks: 2, // จำนวน chunk ขั้นต่ำที่ต้องใช้โมดูลร่วมกันก่อนที่จะแยก priority: -20, reuseExistingChunk: true } } } } };

การกำหนดค่านี้จะสกัด chunk ที่ใช้ร่วมกันโดยอัตโนมัติตามเกณฑ์ที่ระบุ (เช่น `minChunks`, `minSize`)

3. การดึงข้อมูลล่วงหน้า (Prefetching) และการโหลดล่วงหน้า (Preloading) สำหรับ Route

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

ตัวอย่าง Prefetching:

แท็ก HTML นี้จะสั่งให้เบราว์เซอร์ดึงไฟล์ `about.bundle.js` ล่วงหน้าเมื่อเบราว์เซอร์ว่าง ซึ่งสามารถช่วยให้การไปยังหน้า About เร็วขึ้นอย่างมาก

ตัวอย่าง Preloading:

แท็ก HTML นี้จะสั่งให้เบราว์เซอร์ให้ความสำคัญกับการโหลด `critical.bundle.js` ซึ่งมีประโยชน์สำหรับการโหลดโค้ดที่จำเป็นสำหรับการแสดงผลหน้าเว็บครั้งแรก

4. Tree Shaking

Tree shaking เป็นเทคนิคในการกำจัดโค้ดที่ไม่ได้ใช้งาน (dead code) ออกจาก JavaScript bundle ของคุณ โดยจะระบุและลบฟังก์ชัน ตัวแปร และโมดูลที่ไม่ได้ใช้งานออกไป ส่งผลให้ขนาด bundle เล็กลง Bundler อย่าง Webpack และ Rollup รองรับ Tree shaking โดยไม่ต้องตั้งค่าเพิ่มเติม

ข้อควรพิจารณาที่สำคัญสำหรับ Tree Shaking:

• ใช้ ES Modules (ESM): Tree shaking อาศัยโครงสร้างแบบคงที่ของ ES modules (โดยใช้คำสั่ง `import` และ `export`) เพื่อพิจารณาว่าโค้ดส่วนใดที่ไม่ได้ใช้งาน
• หลีกเลี่ยง Side Effects: Side effects คือโค้ดที่ดำเนินการนอกขอบเขตของฟังก์ชัน (เช่น การแก้ไขตัวแปรส่วนกลาง) Bundler อาจมีปัญหาในการทำ Tree shaking กับโค้ดที่มี side effects
• ใช้คุณสมบัติ `sideEffects` ใน `package.json`: คุณสามารถประกาศอย่างชัดเจนว่าไฟล์ใดในแพ็กเกจของคุณมี side effects โดยใช้คุณสมบัติ `sideEffects` ในไฟล์ `package.json` ของคุณ ซึ่งจะช่วยให้ bundler เพิ่มประสิทธิภาพ Tree shaking ได้ดีขึ้น

5. การใช้ Web Workers สำหรับงานที่ต้องใช้การประมวลผลสูง

Web Workers ช่วยให้คุณสามารถรันโค้ด JavaScript ในเธรดเบื้องหลัง (background thread) ป้องกันไม่ให้เธรดหลัก (main thread) ถูกบล็อก ซึ่งมีประโยชน์อย่างยิ่งสำหรับงานที่ต้องใช้การประมวลผลสูง เช่น การประมวลผลภาพ การวิเคราะห์ข้อมูล หรือการคำนวณที่ซับซ้อน โดยการย้ายงานเหล่านี้ไปที่ Web Worker คุณจะสามารถทำให้ส่วนติดต่อผู้ใช้ของคุณยังคงตอบสนองได้ดี

ตัวอย่าง:

// main.js
const worker = new Worker('worker.js');

worker.onmessage = (event) => {
  console.log('Result from worker:', event.data);
};

worker.postMessage({ data: 'some data for processing' });

// worker.js
self.onmessage = (event) => {
  const data = event.data.data;
  // Perform computationally intensive task
  const result = processData(data);
  self.postMessage(result);
};

function processData(data) {
  // ... your processing logic
  return 'processed data';
}

6. Module Federation

Module Federation ซึ่งมีใน Webpack 5 ช่วยให้คุณสามารถแชร์โค้ดระหว่างแอปพลิเคชันต่างๆ ได้ในขณะทำงาน (runtime) ซึ่งช่วยให้คุณสามารถสร้าง micro-frontends และโหลดโมดูลจากแอปพลิเคชันอื่นแบบไดนามิก ลดขนาด bundle โดยรวมและปรับปรุงประสิทธิภาพ

ตัวอย่าง:

สมมติว่าคุณมีสองแอปพลิเคชันคือ `app1` และ `app2` คุณต้องการแชร์คอมโพเนนต์ปุ่มจาก `app1` ไปยัง `app2`

app1 (webpack.config.js):

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ... other configurations
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button.js'
      }
    })
  ]
};

app2 (webpack.config.js):

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ... other configurations
  plugins: [
    new ModuleFederationPlugin({
      name: 'app2',
      remotes: {
        app1: 'app1@http://localhost:3000/remoteEntry.js'
      }
    })
  ]
};

ใน `app2` ตอนนี้คุณสามารถนำเข้าและใช้คอมโพเนนต์ Button จาก `app1` ได้แล้ว:

import Button from 'app1/Button';

เครื่องมือและไลบรารีสำหรับ Code Splitting

มีเครื่องมือและไลบรารีหลายอย่างที่สามารถช่วยคุณในการนำ Code Splitting ไปใช้ในโปรเจกต์ของคุณ:

• Webpack: Module bundler ที่ทรงพลังและหลากหลาย รองรับเทคนิค Code Splitting ต่างๆ รวมถึงการแบ่งตาม entry point, dynamic imports และ vendor splitting
• Rollup: Module bundler ที่โดดเด่นในเรื่อง Tree shaking และการสร้าง bundle ที่มีประสิทธิภาพสูง
• Parcel: Bundler แบบไม่ต้องตั้งค่า (zero-configuration) ที่จัดการ Code Splitting โดยอัตโนมัติด้วยการตั้งค่าเพียงเล็กน้อย
• React.lazy: API ในตัวของ React สำหรับการโหลดคอมโพเนนต์แบบ lazy-loading โดยใช้ dynamic imports
• Loadable Components: Higher-order component สำหรับการทำ Code Splitting ใน React

แนวทางปฏิบัติที่ดีที่สุดสำหรับ Code Splitting

เพื่อนำ Code Splitting ไปใช้อย่างมีประสิทธิภาพ ควรพิจารณาแนวทางปฏิบัติที่ดีที่สุดต่อไปนี้:

• วิเคราะห์แอปพลิเคชันของคุณ: ระบุส่วนที่ Code Splitting จะส่งผลกระทบมากที่สุด โดยเน้นที่คอมโพเนนต์ขนาดใหญ่ ฟีเจอร์ที่ใช้ไม่บ่อย หรือขอบเขตตาม Route
• ตั้งงบประมาณด้านประสิทธิภาพ (Performance Budgets): กำหนดเป้าหมายด้านประสิทธิภาพสำหรับเว็บไซต์ของคุณ เช่น เวลาโหลดเป้าหมายหรือขนาด bundle และใช้งบประมาณเหล่านี้เป็นแนวทางในการทำ Code Splitting
• ติดตามประสิทธิภาพ: ติดตามประสิทธิภาพของเว็บไซต์ของคุณหลังจากนำ Code Splitting ไปใช้ เพื่อให้แน่ใจว่าได้ผลลัพธ์ตามที่ต้องการ ใช้เครื่องมืออย่าง Google PageSpeed Insights, WebPageTest หรือ Lighthouse เพื่อวัดค่าชี้วัดประสิทธิภาพ
• ปรับปรุงการแคช: กำหนดค่าเซิร์ฟเวอร์ของคุณให้แคช JavaScript bundle อย่างเหมาะสมเพื่อลดความจำเป็นที่ผู้ใช้จะต้องดาวน์โหลดโค้ดในการเข้าชมครั้งถัดไป ใช้เทคนิค cache-busting (เช่น การเพิ่มแฮชในชื่อไฟล์) เพื่อให้แน่ใจว่าผู้ใช้จะได้รับโค้ดเวอร์ชันล่าสุดเสมอ
• ใช้ Content Delivery Network (CDN): กระจาย JavaScript bundle ของคุณผ่าน CDN เพื่อปรับปรุงเวลาในการโหลดสำหรับผู้ใช้ทั่วโลก
• พิจารณาข้อมูลประชากรผู้ใช้: ปรับกลยุทธ์ Code Splitting ของคุณให้เข้ากับความต้องการเฉพาะของกลุ่มเป้าหมายของคุณ ตัวอย่างเช่น หากผู้ใช้ส่วนใหญ่ของคุณใช้การเชื่อมต่ออินเทอร์เน็ตที่ช้า คุณอาจต้องใช้ Code Splitting ที่เข้มข้นขึ้น
• การวิเคราะห์ Bundle อัตโนมัติ: ใช้เครื่องมืออย่าง Webpack Bundle Analyzer เพื่อแสดงภาพขนาด bundle ของคุณและระบุโอกาสในการปรับปรุงประสิทธิภาพ

ตัวอย่างการใช้งานจริงและกรณีศึกษา

หลายบริษัทได้นำ Code Splitting มาใช้เพื่อปรับปรุงประสิทธิภาพเว็บไซต์ของตนเองได้สำเร็จ นี่คือตัวอย่างบางส่วน:

• Google: Google ใช้ Code Splitting อย่างกว้างขวางในเว็บแอปพลิเคชันต่างๆ รวมถึง Gmail และ Google Maps เพื่อมอบประสบการณ์ผู้ใช้ที่รวดเร็วและตอบสนองได้ดี
• Facebook: Facebook ใช้ Code Splitting เพื่อเพิ่มประสิทธิภาพการโหลดฟีเจอร์และคอมโพเนนต์ต่างๆ เพื่อให้แน่ใจว่าผู้ใช้จะดาวน์โหลดเฉพาะโค้ดที่ต้องการ
• Netflix: Netflix ใช้ Code Splitting เพื่อปรับปรุงเวลาเริ่มต้นของเว็บแอปพลิเคชัน ช่วยให้ผู้ใช้สามารถเริ่มสตรีมเนื้อหาได้เร็วขึ้น
• แพลตฟอร์มอีคอมเมิร์ซขนาดใหญ่ (Amazon, Alibaba): แพลตฟอร์มเหล่านี้ใช้ Code Splitting เพื่อเพิ่มประสิทธิภาพเวลาในการโหลดหน้าสินค้า ยกระดับประสบการณ์การช็อปปิ้งสำหรับผู้ใช้หลายล้านคนทั่วโลก พวกเขาโหลดรายละเอียดสินค้า สินค้าที่เกี่ยวข้อง และรีวิวจากผู้ใช้แบบไดนามิกตามการโต้ตอบของผู้ใช้

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

บทสรุป

Code splitting เป็นเทคนิคสำคัญสำหรับการเพิ่มประสิทธิภาพ JavaScript bundle และปรับปรุงประสิทธิภาพของเว็บไซต์ ด้วยการแบ่งโค้ดของแอปพลิเคชันออกเป็นส่วนย่อยๆ ที่จัดการได้ง่ายขึ้น คุณสามารถลดเวลาในการโหลดเริ่มต้น ยกระดับประสบการณ์ผู้ใช้ และปรับปรุงประสิทธิภาพการแคชได้ ด้วยการทำความเข้าใจประเภทต่างๆ ของ Code Splitting และการนำแนวทางปฏิบัติที่ดีที่สุดมาใช้ คุณจะสามารถปรับปรุงประสิทธิภาพของเว็บแอปพลิเคชันของคุณได้อย่างมีนัยสำคัญและมอบประสบการณ์ที่ดีขึ้นให้กับผู้ใช้ของคุณ

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