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

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

function App() {
  return (
    
      Loading...

ในตัวอย่างนี้ คอมโพเนนต์ Home, About และ Products จะถูกโหลดแบบ lazy คอมโพเนนต์ Suspense จะแสดง UI สำรอง (ในกรณีนี้คือ "Loading...") ในขณะที่คอมโพเนนต์กำลังถูกโหลด

ตัวอย่างสถานการณ์: ลองจินตนาการถึงแพลตฟอร์มโซเชียลมีเดียระดับโลก เมื่อผู้ใช้ล็อกอินครั้งแรก พวกเขาจะถูกนำไปยังหน้าฟีดข่าว (Home) โค้ดสำหรับฟีเจอร์ต่างๆ เช่น โปรไฟล์ผู้ใช้ (About) หรือตลาด (Products) จะถูกโหลดก็ต่อเมื่อผู้ใช้ไปยังส่วนเหล่านั้น ซึ่งช่วยปรับปรุงเวลาในการโหลดครั้งแรก

Angular

Angular รองรับการ lazy loading ของโมดูลผ่านการกำหนดค่า router คุณสามารถใช้ property loadChildren เพื่อระบุโมดูลที่ควรจะถูกโหลดเมื่อมีความต้องการ

            
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
  { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) },
  { path: 'products', loadChildren: () => import('./products/products.module').then(m => m.ProductsModule) },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

            

              
                Copy
              
            
          

ในตัวอย่างนี้ HomeModule, AboutModule และ ProductsModule จะถูกโหลดแบบ lazy เมื่อผู้ใช้ไปยังเส้นทางของแต่ละโมดูล

ตัวอย่างสถานการณ์: ลองนึกถึงเว็บพอร์ทัลภายในของบริษัทข้ามชาติ แผนกต่างๆ (เช่น HR, การเงิน, การตลาด) มีโมดูลเป็นของตัวเอง Code splitting ช่วยให้มั่นใจได้ว่าพนักงานจะดาวน์โหลดเฉพาะโค้ดสำหรับแผนกที่พวกเขาใช้งานเท่านั้น ซึ่งทำให้กระบวนการโหลดมีความคล่องตัวขึ้น

Vue.js

Vue.js รองรับการ lazy loading ของคอมโพเนนต์โดยใช้ dynamic imports ในการกำหนดค่า router ของคุณ

            
// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/products',
    name: 'Products',
    component: () => import(/* webpackChunkName: "products" */ '../views/Products.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

            

              
                Copy
              
            
          

ในที่นี้ คอมโพเนนต์ Home.vue, About.vue และ Products.vue จะถูกโหลดแบบ lazy เมื่อมีการเข้าชมเส้นทางของแต่ละคอมโพเนนต์ คอมเมนต์ webpackChunkName ช่วยให้ Webpack สร้าง chunk แยกสำหรับแต่ละคอมโพเนนต์

ตัวอย่างสถานการณ์: ลองนึกภาพแพลตฟอร์มการศึกษาออนไลน์ระดับโลก โมดูลของหลักสูตร (เช่น คณิตศาสตร์, ประวัติศาสตร์, วิทยาศาสตร์) สามารถโหลดได้ตามความต้องการเมื่อนักเรียนลงทะเบียนเรียน ซึ่งแนวทางนี้ช่วยลดขนาดการดาวน์โหลดเริ่มต้นและเพิ่มประสิทธิภาพประสบการณ์ของผู้ใช้

ข้อดีของการทำ Code Splitting แบบ Route-Based

• การนำไปใช้ที่ง่าย: ค่อนข้างง่ายต่อการตั้งค่าและทำความเข้าใจ
• การแบ่งแยกหน้าที่ที่ชัดเจน: สอดคล้องกับโครงสร้างของเว็บแอปพลิเคชันจำนวนมากได้เป็นอย่างดี
• ปรับปรุงเวลาในการโหลดครั้งแรก: ลดปริมาณโค้ดที่โหลดล่วงหน้าได้อย่างมีนัยสำคัญ

ข้อเสียของการทำ Code Splitting แบบ Route-Based

• อาจเกิดการซ้ำซ้อน: คอมโพเนนต์หรือ dependency ที่ใช้ร่วมกันอาจถูกรวมอยู่ใน chunk ของหลาย route ซึ่งนำไปสู่การซ้ำซ้อนของโค้ด
• ข้อจำกัดด้านความละเอียด: อาจไม่เหมาะสำหรับแอปพลิเคชันที่มีคอมโพเนนต์ซับซ้อนที่ใช้ร่วมกันในหลาย route

การทำ Code Splitting แบบ Component-Based

การทำ code splitting แบบ Component-based คือการแบ่งโค้ดของแอปพลิเคชันตามคอมโพเนนต์แต่ละตัว แทนที่จะเป็นทั้ง route ซึ่งช่วยให้มีแนวทางในการโหลดโค้ดที่ละเอียดมากขึ้น โดยจะโหลดเฉพาะโค้ดที่จำเป็นสำหรับคอมโพเนนต์เฉพาะเมื่อมีความต้องการเท่านั้น

การนำไปใช้

การทำ code splitting แบบ Component-based มีความซับซ้อนกว่าแบบ route-based แต่ให้ความยืดหยุ่นและศักยภาพในการเพิ่มประสิทธิภาพที่มากกว่า ซึ่งการนำไปใช้จะแตกต่างกันไปขึ้นอยู่กับเฟรมเวิร์ก

React

ใน React คุณสามารถใช้ React.lazy และ Suspense เพื่อ lazy load คอมโพเนนต์แต่ละตัวภายใน route หรือคอมโพเนนต์อื่นได้

            
import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function MyPage() {
  return (
    

      
Welcome to My Page
      Loading Component...
}>