Xoá các đoạn mã không dùng đến

Houssein Djirdeh

Để tham gia lớp học lập trình này, hãy mở lỗi Glitch này trong một thẻ thứ hai.

Lưu ý: Lớp học lập trình này sử dụng Công cụ của Chrome cho nhà phát triển. Tải Chrome xuống nếu bạn chưa có.

Trong lớp học lập trình này, hãy cải thiện hiệu suất của ứng dụng sau bằng cách xoá mọi phần phụ thuộc không dùng đến và không cần thiết.

Đo

Lưu ý: Vì webpack được sử dụng trong ứng dụng này, nên mọi thay đổi đối với mã sẽ kích hoạt một bản dựng mới. Quá trình này có thể mất vài giây. Sau khi quá trình này hoàn tất, bạn sẽ thấy các thay đổi của mình được phản ánh trong ứng dụng.

Trước tiên, bạn nên đo lường hiệu suất của trang web trước khi thêm các biện pháp tối ưu hoá.

• Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào biểu tượng Màn hình toàn cảnh .

Hãy tiếp tục và nhấp vào chú mèo con bạn yêu thích! Cơ sở dữ liệu theo thời gian thực của Firebase được sử dụng trong ứng dụng này, đó là lý do điểm số được cập nhật theo thời gian thực và đồng bộ hoá với mọi người khác sử dụng ứng dụng. 🐈

1. Nhấn tổ hợp phím `Ctrl+Shift+J` (hoặc `Command+Option+J` trên máy Mac) để mở DevTools.
2. Nhấp vào thẻ Mạng.
3. Chọn hộp đánh dấu Tắt bộ nhớ đệm.
4. Tải lại ứng dụng.

Gần 1 MB JavaScript đang được vận chuyển để tải ứng dụng đơn giản này!

Xem các cảnh báo về dự án trong DevTools.

• Nhấp vào thẻ Bảng điều khiển.
• Đảm bảo rằng bạn đã bật Warnings trong trình đơn thả xuống levels (cấp) bên cạnh đầu vào Filter.

• Hãy xem cảnh báo xuất hiện.

Firebase, một trong những thư viện được sử dụng trong ứng dụng này, đang đóng vai trò là người Samaritan tốt bằng cách đưa ra cảnh báo để nhà phát triển biết không nên nhập toàn bộ gói mà chỉ nhập các thành phần được sử dụng. Nói cách khác, có những thư viện không dùng đến có thể được xoá trong ứng dụng này để ứng dụng tải nhanh hơn.

Ngoài ra, cũng có những trường hợp sử dụng một thư viện cụ thể, nhưng có thể có một giải pháp thay thế đơn giản hơn. Khái niệm xoá các thư viện không cần thiết sẽ được khám phá ở phần sau của hướng dẫn này.

Phân tích gói

Có hai phần phụ thuộc chính trong ứng dụng:

• Firebase: một nền tảng cung cấp một số dịch vụ hữu ích cho các ứng dụng iOS, Android hoặc web. Trong đó, Cơ sở dữ liệu theo thời gian thực được dùng để lưu trữ và đồng bộ hoá thông tin cho từng chú mèo con theo thời gian thực.
• Moment.js: một thư viện tiện ích giúp bạn dễ dàng xử lý ngày trong JavaScript. Ngày sinh của mỗi chú mèo con được lưu trữ trong cơ sở dữ liệu Firebase và moment được dùng để tính tuổi của chú mèo con đó theo tuần.

Làm cách nào để chỉ hai phần phụ thuộc có thể đóng góp vào kích thước gói gần 1 MB? Vâng, một trong những lý do là bất kỳ phần phụ thuộc nào cũng có thể có các phần phụ thuộc riêng, vì vậy, sẽ có nhiều phần phụ thuộc hơn nếu xem xét mọi chiều sâu/nhánh của "cây" phần phụ thuộc. Ứng dụng có thể dễ dàng trở nên lớn khá nhanh nếu có nhiều phần phụ thuộc.

Hãy phân tích trình tạo gói để hiểu rõ hơn về những gì đang diễn ra. Có một số công cụ do cộng đồng xây dựng có thể giúp bạn thực hiện việc này, chẳng hạn như webpack-bundle-analyzer.

Gói cho công cụ này đã có trong ứng dụng dưới dạng devDependency.

"devDependencies": {
  //...
  "webpack-bundle-analyzer": "^2.13.1"
},

Điều này có nghĩa là bạn có thể sử dụng trực tiếp trong tệp cấu hình webpack. Nhập lớp này ngay từ đầu webpack.config.js:

const path = require("path");

//...
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;

Bây giờ, hãy thêm tệp này dưới dạng trình bổ trợ ở cuối tệp trong mảng plugins:

module.exports = {
  //...
  plugins: [
    //...
    new BundleAnalyzerPlugin()
  ]
};

Khi ứng dụng tải lại, bạn sẽ thấy hình ảnh trực quan của toàn bộ gói thay vì chính ứng dụng.

Không dễ thương bằng việc nhìn thấy một số chú mèo con 🐱, nhưng vẫn cực kỳ hữu ích. Khi di chuột qua bất kỳ gói nào, kích thước của gói đó sẽ hiển thị theo 3 cách:

Kích thước số liệu thống kê	Kích thước trước khi rút gọn hoặc nén.
Kích thước đã phân tích cú pháp	Kích thước của gói thực tế trong gói sau khi được biên dịch. Phiên bản 4 của webpack (được dùng trong ứng dụng này) tự động rút gọn các tệp đã biên dịch, đó là lý do kích thước tệp này nhỏ hơn kích thước thống kê.
Kích thước nén bằng gzip	Kích thước của gói sau khi được nén bằng mã hoá gzip. Chủ đề này sẽ được đề cập trong một hướng dẫn riêng.

Với công cụ webpack-bundle-analyzer, bạn có thể dễ dàng xác định các gói không sử dụng hoặc không cần thiết chiếm tỷ lệ lớn trong gói.

Xoá các gói không dùng đến

Hình ảnh trực quan cho thấy gói firebase bao gồm nhiều thành phần hơn là chỉ một cơ sở dữ liệu. Gói này bao gồm các gói bổ sung như:

• firestore
• auth
• storage
• messaging
• functions

Đây đều là những dịch vụ tuyệt vời do Firebase cung cấp (và hãy tham khảo tài liệu để tìm hiểu thêm), nhưng không có dịch vụ nào được sử dụng trong ứng dụng, vì vậy, bạn không cần nhập tất cả các dịch vụ này.

Huỷ bỏ các thay đổi trong webpack.config.js để xem lại ứng dụng:

• Xoá BundleAnalyzerPlugin trong danh sách trình bổ trợ:

plugins: [
  //...
  new BundleAnalyzerPlugin()
];

• Bây giờ, hãy xoá phần nhập không dùng đến ở đầu tệp:

const path = require("path");

//...
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

Ứng dụng hiện sẽ tải bình thường. Sửa đổi src/index.js để cập nhật các lệnh nhập Firebase.

import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';

Bây giờ, khi ứng dụng tải lại, cảnh báo DevTools sẽ không xuất hiện. Việc mở bảng điều khiển Mạng của DevTools cũng cho thấy kích thước gói giảm rất nhiều:

Đã xoá hơn một nửa kích thước gói. Firebase cung cấp nhiều dịch vụ khác nhau và cho phép nhà phát triển chỉ đưa vào những dịch vụ thực sự cần thiết. Trong ứng dụng này, chỉ firebase/database được dùng để lưu trữ và đồng bộ hoá tất cả dữ liệu. Bạn luôn phải nhập firebase/app để thiết lập giao diện API cho từng dịch vụ.

Nhiều thư viện phổ biến khác, chẳng hạn như lodash, cũng cho phép nhà phát triển nhập có chọn lọc các phần khác nhau của gói. Việc cập nhật các lệnh nhập thư viện trong ứng dụng để chỉ bao gồm những thư viện đang được sử dụng có thể giúp cải thiện đáng kể hiệu suất mà không cần làm gì nhiều.

Mặc dù kích thước gói đã giảm đi khá nhiều, nhưng chúng ta vẫn còn nhiều việc cần làm! 😈

Xoá các gói không cần thiết

Không giống như Firebase, bạn không thể nhập các phần của thư viện moment một cách dễ dàng, nhưng có thể xoá hoàn toàn thư viện này?

Ngày sinh của mỗi chú mèo con dễ thương được lưu trữ ở định dạng Unix (mili giây) trong cơ sở dữ liệu Firebase.

Đây là dấu thời gian của một ngày và giờ cụ thể, được biểu thị bằng số mili giây đã trôi qua kể từ 00:00 ngày 1 tháng 1 năm 1970 (theo giờ UTC). Nếu ngày và giờ hiện tại có thể được tính theo cùng một định dạng, thì bạn có thể tạo một hàm nhỏ để tìm tuổi của mỗi chú mèo con tính theo tuần.

Như mọi khi, hãy cố gắng không sao chép và dán khi bạn làm theo hướng dẫn tại đây. Bắt đầu bằng cách xoá moment khỏi các lệnh nhập trong src/index.js.

import firebase from 'firebase/app';
import 'firebase/database';
import * as moment from 'moment';

Có một trình nghe sự kiện Firebase xử lý các thay đổi về giá trị trong cơ sở dữ liệu của chúng ta:

favoritesRef.on("value", (snapshot) => { ... })

Ở phía trên, hãy thêm một hàm nhỏ để tính số tuần từ một ngày nhất định:

const ageInWeeks = birthDate => {
  const WEEK_IN_MILLISECONDS = 1000 * 60 * 60 * 24 * 7;
  const diff = Math.abs((new Date).getTime() - birthDate);
  return Math.floor(diff / WEEK_IN_MILLISECONDS);
}

Trong hàm này, sự khác biệt về mili giây giữa ngày và giờ hiện tại (new Date).getTime() và ngày sinh (đối số birthDate, đã ở dạng mili giây) được tính toán và chia cho số mili giây trong một tuần.

Cuối cùng, bạn có thể xoá tất cả các thực thể của moment trong trình nghe sự kiện bằng cách tận dụng hàm này:

favoritesRef.on("value", (snapshot) => {
  const { kitties, favorites, names, birthDates } = snapshot.val();
  favoritesScores = favorites;

  kittiesList.innerHTML = kitties.map((kittiePic, index) => {
    const birthday = moment(birthDates[index]);

    return `
      <li>
        <img src=${kittiePic} onclick="favKittie(${index})">
        <div class="extra">
          <div class="details">
            <p class="name">${names[index]}</p>
            <p class="age">${moment().diff(birthday, 'weeks')} weeks old</p>
            <p class="age">${ageInWeeks(birthDates[index])} weeks old</p>
          </div>
          <p class="score">${favorites[index]} ❤</p>
        </div>
      </li>
    `})
});

Bây giờ, hãy tải lại ứng dụng và xem lại bảng điều khiển Network (Mạng).

Kích thước gói của chúng tôi đã giảm hơn một nửa!

Kết luận

Thông qua lớp học lập trình này, bạn sẽ hiểu rõ cách phân tích một gói cụ thể và lý do việc xoá các gói không dùng đến hoặc không cần thiết có thể rất hữu ích. Trước khi bắt đầu tối ưu hoá ứng dụng bằng kỹ thuật này, bạn cần biết rằng việc này có thể phức tạp hơn đáng kể trong các ứng dụng lớn hơn.

Đối với việc xoá các thư viện không dùng đến, hãy cố gắng tìm hiểu xem phần nào của gói đang được sử dụng và phần nào không. Đối với một gói có vẻ bí ẩn và có vẻ như không được sử dụng ở bất kỳ đâu, hãy lùi lại một bước và kiểm tra xem phần phụ thuộc cấp cao nhất nào có thể cần gói đó. Hãy tìm cách tách biệt các thành phần này với nhau.

Khi nói đến việc xoá các thư viện không cần thiết, mọi thứ có thể phức tạp hơn một chút. Bạn cần làm việc chặt chẽ với nhóm của mình để xem liệu có thể đơn giản hoá các phần của cơ sở mã hay không. Việc xoá moment trong ứng dụng này có vẻ như là việc cần làm mỗi khi cần, nhưng nếu có các múi giờ và ngôn ngữ khác nhau cần xử lý thì sao? Hoặc nếu có các thao tác ngày phức tạp hơn thì sao? Mọi thứ có thể trở nên rất rắc rối khi thao tác và phân tích cú pháp ngày/giờ, và các thư viện như moment và date-fns giúp đơn giản hoá đáng kể việc này.

Mọi thứ đều có sự đánh đổi và điều quan trọng là bạn phải đánh giá xem liệu việc triển khai một giải pháp tuỳ chỉnh có đáng với sự phức tạp và nỗ lực hay không thay vì dựa vào thư viện của bên thứ ba.