การทำ Dynamic Import ใน JavaScript

การลดขนาดของ Javascript นอกจากจะส่งผลกับการ โหลดหน้าเว็บไซด์แล้วยังช่วยให้เราสามารถเลือกที่จะ Import ทุกไฟล์มาทีเดียวพร้อมๆกันหรือจะเลือกเฉพาะ File ที่จะใช้งานเท่านั้นก็ได้

การ Import JavaScript เข้ามาใช้งานมี 2 ลักษณะ

• Eager Loading การ import ทุกไฟล์ที่จำเป็นต้องใช้งานขึ้นมาให้พร้อมใช้งานในตอนเริ่มต้น
• Lazy Loading การ import เฉพาะไฟล์ที่จำเป็นต้องใช้ตอนนี้เท่านั้น ถ้ายังไม่ใช้ก็ยังไม่ Load

Dynamic Import

เป็นวิธีการ Load JavaScript แบบ Lazy Loading ถ้าการใช้ import แบบปกติจะเป็น Eager Loading แล้วทำไมต้องค่อยๆ Load(Lazy Loading) เพราะเนื่องจากการ Load JavaScript ขึ้นมานั้น ทั้งการ Load และการ Execute จะไป Block การทำงานของ HTML Parsing(ตัวแปล html) ทำให้การทำงานช้าลง

Import Javascript Module

ตัวอย่างการ Import แบบปกติ Eager Loading(Load ทุกไฟล์ขึ้นมาทีเดียวตั้งแต่ต้น)

1

import { customer } from “customer.js”;

วิธีการทำ Dynamic Import

เราจะเปลี่ยนจากการ import ด้วย syntax แบบเดิม เปลี่ยนมาใช้เครื่องหมายวงเล็บแบบนี้แทน

1

import('./customer.js')

ซึ่งการ import แบบนี้สามารถใส่ไว้ในส่วนไหนของ source code ก็ได้ เช่น

1
2
3
4

const btn = document.getElementById('someButton');
btn.onclick = () => {
    import('./customer.js')
}

หรือจะทำการ Load JavaScript ขึ้นมาแบบมีเงื่อนไขได้ เช่น

1
2
3
4

const isCustomer = false;
if(isCustomer){
    import('./customer.js');
}

ถ้าไม่เข้าเงื่อนไขก็จะไม่มีการ import JavaScript นี้ขึ้นมาใช้งาน

นอกจากนี้ import function นี้ยัง return promise มาให้เรา ดังน้ันเราสามารถใช้ .then() สร้าง event handler สำหรับบอกว่าหลังจากที่ import JavaScript เข้ามาแล้วจะให้ทำอะไรต่อ

1
2
3

import('./customer.js').then(module => {
    console.log(module.customer)
});

หรือเราจะทำการ handle error โดยใช้ code แบบนี้

1
2
3
4
5

import('./customer.js').then(module => {
    console.log(module.customer)
}).catch(e => {
    console.error(e);
});

หรือจะเขียนแบบ Async Await ก็ได้

1
2
3
4

(async () => {
    const module = await import('./customer.js');
    console.log(module.customer)
})();

ทีนี้เราลองมาดูสิ่งที่ return ออกมาไว้ในตัวแปร module นั้นสาสามารถเป็นอะไรได้บ้าง

แบบแรกเราสามารถ return ออกมาทั้ง object เลย

1
2
3
4
5
6

export const customer = {
    name: "John Doe",
    age: 42,
    favoriteColor: "grey",
    province: "Bangkok"
};

แบบที่สองเราสามารถ return ออกมาเฉพาะบาง function แบบนี้ก็ได้

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

function getNextCustomer(){
    return {
        name: "Jenny Doe",
        age: 35,
        favoriteColor: "grey",
        province: "Bangkok"
    }
}

export {getNextCustomer}

หรือจะ export โดยใช้ Class แบบนี้ก็ได้

1
2
3
4
5
6
7
8

class Customer{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
}

export {Customer}

ซึ่งสิ่งที่ export ออกไปจะถูกนำไป assign เข้าตัวแปร module ในขั้นตอนก่อนหน้านี้