Frontend Code Splitting: Route-Based and Component-Based

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

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

function App() {
 return (
 
 Loading...

ในตัวอย่างนี้ คอมโพเนนต์ Home และ About จะถูกโหลดแบบ lazy โดยใช้ React.lazy() และ dynamic imports คอมโพเนนต์ Suspense มี fallback UI ในขณะที่กำลังโหลดคอมโพเนนต์ React Router จัดการการนำทางและทำให้มั่นใจว่าคอมโพเนนต์ที่ถูกต้องจะถูกแสดงผลตามเส้นทางปัจจุบัน

Example (Angular)

ใน Angular การแบ่งโค้ดแบบ route-based ทำได้โดยใช้ lazy-loaded modules

// 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) }
];

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

ที่นี่ คุณสมบัติ loadChildren ในการกำหนดค่าเส้นทางระบุเส้นทางไปยังโมดูลที่ควรโหลดแบบ lazy Angular's router จะโหลดโมดูลและคอมโพเนนต์ที่เกี่ยวข้องโดยอัตโนมัติเมื่อผู้ใช้นำทางไปยังเส้นทางที่สอดคล้องกันเท่านั้น

Example (Vue.js)

Vue.js ยังรองรับการแบ่งโค้ดแบบ route-based โดยใช้ dynamic imports ในการกำหนดค่า router

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

Vue.use(VueRouter);

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

const router = new VueRouter({
 routes
});

export default router;

ตัวเลือก component ในการกำหนดค่าเส้นทางใช้ dynamic import เพื่อโหลดคอมโพเนนต์ asynchronously Vue Router จะจัดการการโหลดและการแสดงผลของคอมโพเนนต์เมื่อเข้าถึงเส้นทาง

Benefits of Route-Based Code Splitting

• Simple to implement: การแบ่งโค้ดแบบ route-based ค่อนข้างตรงไปตรงมาในการนำไปใช้งาน โดยเฉพาะอย่างยิ่งกับการสนับสนุนที่ได้รับจาก frameworks ที่ทันสมัย
• Clear separation of concerns: แต่ละเส้นทางแสดงถึงส่วนที่แตกต่างกันของแอปพลิเคชัน ทำให้ง่ายต่อการอ้างเหตุผลเกี่ยวกับโค้ดและการพึ่งพา
• Effective for large applications: การแบ่งโค้ดแบบ route-based มีประโยชน์อย่างยิ่งสำหรับแอปพลิเคชันขนาดใหญ่ที่มีเส้นทางและคุณสมบัติมากมาย

Drawbacks of Route-Based Code Splitting

• May not be granular enough: การแบ่งโค้ดแบบ route-based อาจไม่เพียงพอสำหรับแอปพลิเคชันที่มีคอมโพเนนต์ที่ซับซ้อนซึ่งใช้ร่วมกันในหลายเส้นทาง
• Initial load time may still be high: หากเส้นทางมี dependencies จำนวนมาก เวลาในการโหลดเริ่มต้นสำหรับเส้นทางนั้นอาจยังคงมีนัยสำคัญ

Component-Based Code Splitting

Component-based code splitting เป็นการแบ่งโค้ดไปอีกขั้นโดยการแบ่งโค้ดแอปพลิเคชันออกเป็นส่วนย่อยๆ ตาม individual components แนวทางนี้ช่วยให้สามารถควบคุมการโหลดโค้ดได้อย่างละเอียดมากขึ้น และอาจมีประสิทธิภาพอย่างยิ่งสำหรับแอปพลิเคชันที่มี UIs ที่ซับซ้อนและ reusable components

Implementation

Component-based code splitting ยังอาศัย dynamic imports แต่แทนที่จะโหลดทั้งเส้นทาง individual components จะถูกโหลดตามต้องการ สิ่งนี้สามารถทำได้โดยใช้เทคนิคต่างๆ เช่น:

1. Lazy loading components: ใช้ dynamic imports เพื่อโหลด components เฉพาะเมื่อจำเป็นเท่านั้น เช่น เมื่อแสดงผลเป็นครั้งแรก หรือเมื่อมีเหตุการณ์เฉพาะเกิดขึ้น
2. Conditional rendering: แสดงผล components แบบมีเงื่อนไขตาม user interaction หรือปัจจัยอื่นๆ โดยโหลดโค้ด component เฉพาะเมื่อตรงตามเงื่อนไข
3. Intersection Observer API: ใช้ Intersection Observer API เพื่อตรวจจับเมื่อ component มองเห็นได้ใน viewport และโหลดโค้ดตามนั้น สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับการโหลด components ที่เริ่มต้นนอกหน้าจอ

Example (React)

import React, { Suspense, lazy } from 'react';

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

function App() {
 return (
 

 Loading...
}>