Nội dung bài viết

Video học lập trình mỗi ngày

ES2020 javascript đã cung cấp cho developers thêm nhiều chức năng như Optional Chaining, Nullish coalescing Operator... Và trong đó có một tính năng tuyệt vời đó là Dynamic Imports. Và do đó, trong bài viết này, tipjs sẽ giúp bạn hiểu và khi nào sử dụng về Dynamic import trong javascript. Ngoài ra, các bạn nên xem thêm về những tính năng javascript trên ES2020.

Static Import()

Đầu tiên chúng tôi nói về khái niệm import() được giới thiệu trong ES2015 (hay còn gọi là ES6). Cho phép chúng ta sử dụng những module như chúng ta từng viết dưới Nodejs. Với cú pháp sau:

<script type="module" src="main.mjs"></script>

Viêch phát triển này rất hay, khi chúng ta có thể sử dụng import and export trên browser, một cách thuận lợi. Nhưng ở đâu đó vẫn còn một số người khó tính như tôi chẳng hạn, thì việc này còn có một nhược điểm đó là, với sự khai báo như thế này, thì việc module luôn được load khi user tải lại trang.

Nghĩa là, 10 users sử dụng web thì chỉ có 2 users sử dụng chức năng của module này thôi. Nhưng có đến 10 lần load. Đó là một sự lãng phí và làm chậm sự trải nghiệm của người dùng. Chính vì vậy ở ES2020 đã giới thiệu chức năng Dynamic import().

Dynamic import()

Để nói cho các bạn hiểu sâu hơn cho nên chúng ta sẽ đi vào một ví dụ cụ thể mà tôi đã soạn ra, chính vì vậy các bạn hãy tập trung vào ví dụ này, chỉ cần hiểu ví dụ này thì bạn đã nắm về chức năng Dynamic import rồi. Tôi sẽ tạo một file add.js khai báo module như sau

const add = (a, b) => a + b;

export default add;

Sau đó, tôi viết tiếp file index.html và sử dụng module như sau

import module ES6

Trước đây, chúng ta sử dụng es2015 thì trên file index.html thì chúng ta sẽ thường sử dụng module như thế này.

<html>
  <head>
    <title>ES2020 features</title>
  </head>
  <body>
    <input type="text" id="num1"> + <input type="text" id="num2"> <button id="equal"> = </button> <input type="text" id="num3">

    <script type="module">
        //nếu copy vui lòng để nguồn: anonystick.com -> tks
        //Không thể load sau khi click button =, mà phải load trước.... 
        import add from './js/add.js';
        document.getElementById('equal').addEventListener('click', (el) => {
            
            document.getElementById('num3').value = add(+document.getElementById('num1').value, +document.getElementById('num2').value) 
        })
    </script>
  </body>
</html>

Bạn thấy đấy, trên kia tôi có nói đến là 10 users vào, thì chúng ta sẽ load 10 lần file ./js/add.js. Nhưng thật sử chỉ có 2 users sử dụng mà thôi. Thật đáng tiếc phải không? Code trên thì tôi không cần phải giải thích nguyên lý hoạt động nữa, vì nó quá basic rồi.

import module ES2020

Nhưng đối với ES2020 javascript thì giờ đây chúng ta sẽ sử dụng dynamic import file ./js/add.js thuỳ thích. Điều đó có nghĩa là chỉ khi user nào đó click vào chức năng tính toán thì lúc đó ./js/add.js mới thực sự load. Hãy xem code dưới đây:

<!DOCTYPE html>
<html>
  <head>
    <title>ES2020 features</title>
  </head>
  <body>

    <input type="text" id="num1"> + <input type="text" id="num2"> <button id="equal"> = </button> <input type="text" id="num3">

    <script>
        document.getElementById('equal').addEventListener('click', (el) => {
            //nếu copy vui lòng để nguồn: anonystick.com -> tks
            // co thể load sau khi user click, rất thoải mái cho nhứng trường hợp như dowload
            import('./js/add.js')
            .then(module => {
                document.getElementById('num3').value = module.default(+document.getElementById('num1').value, +document.getElementById('num2').value) 

            }) //returns 11
            .catch(error => console.log(error));
        })
  </script>
  </body>
</html>

Nhìn vào code trên, bạn đã thấy, sau khi event click được active thì lúc đó import('./js/add.js') sẽ được load mà không cần phải tải ngay lúc đầu. Như vậy là bạn đã hiểu... Tôi hỏi lại bạn đã hiểu thực sự về ES2020 Dynamic Import???

Chưa đâu, nếu bạn không tinh ý thì sẽ bỏ qua một chi tiết mà những người nhiều kinh nghiệm sẽ đặt ngay câu hỏi là : "Như đoạn code trên thì mỗi lần user click thì sẽ import() lại file './js/add.js'??? Có đúng không? ". Một câu hỏi rất hay, và câu trả lời đó là:

Không, sẽ không tải lại, nó chỉ tải một lần duy nhất, khi event click được active đầu tiên mà thôi. Ở lần thứ 2 , 3 ...n thì sẽ không phải tải lại nữa. Không tin ư? Hãy thử copy code về chạy xem nào!!!

Khi nào nên sử dụng dynamic import ES2020

Câu hỏi này tuỳ thuộc vào kỹ năng, kinh nghiệm của mỗi người, và có thể theo hoàn cảnh khác nhau. Nhưng ở đây có mẫu số chung cho việc đó. Như đoạn code trên, thì sử dụng khi cần được tính toán trong việc vay ngân hàng mua xe chằng hạn. Bạn có thể thấy đa số những web bán xe đều có chức năng "Tính toán tiền mua xe lăn bánh", thì nên sử dụng chức năng này. Bởi vì ít ai dùng chức năng đó.

Thứ 2 đó là tôi thấy nhiều website đề cập đến việc export file ra excels. Thì cũng nên sử dụng chức năng dynamic import này. Vâng vâng và ...

Tóm lại

Nói chúng, bài viết này đã quá đủ để bất kỳ bạn nào hiểu và sử dụng tính năng dynamic import ES2020 này rồi. Và nó tuỳ thuộc vào kỹ năng, và hoàn cảnh của mỗi devjs để phát huy tính sáng tạo. Làm nhanh hệ thống, giúp người dùng trả nghiệm tốt nhất ứng dụng của mình.

Ngoài ra, các bạn nên xem thêm về những tính năng javascript trên ES2020. Nếu bạn thấy hay có thể copy về web của bạn, nhưng hãy để lại dấu răng của tôi.

Ký tên: anonystick.com

ES2020 - Dynamic import