Hapus kode yang tidak digunakan

Houssein Djirdeh

Dalam codelab ini, tingkatkan performa aplikasi berikut dengan menghapus dependensi yang tidak digunakan dan tidak diperlukan.

Ukur

Sebaiknya ukur performa situs terlebih dahulu sebelum menambahkan pengoptimalan.

• Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh .

Lanjutkan dan klik anak kucing favorit Anda! Realtime Database Firebase digunakan dalam aplikasi ini, itulah sebabnya skor diperbarui secara real-time dan disinkronkan dengan setiap orang lain yang menggunakan aplikasi. 🐈

1. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
2. Klik tab Jaringan.
3. Centang kotak Nonaktifkan cache.
4. Muat ulang aplikasi.

JavaScript hampir 1 MB dikirim untuk memuat aplikasi sederhana ini.

Lihat peringatan project di DevTools.

• Klik tab Konsol.
• Pastikan Warnings diaktifkan di dropdown level di samping input Filter.

• Lihat peringatan yang ditampilkan.

Firebase, yang merupakan salah satu library yang digunakan dalam aplikasi ini, menjadi orang yang baik dengan memberikan peringatan untuk memberi tahu developer agar tidak mengimpor seluruh paketnya, tetapi hanya komponen yang digunakan. Dengan kata lain, ada library yang tidak digunakan yang dapat dihapus di aplikasi ini agar memuat lebih cepat.

Ada juga kasus saat library tertentu digunakan, tetapi mungkin ada alternatif yang lebih sederhana. Konsep menghapus library yang tidak diperlukan akan dibahas nanti dalam tutorial ini.

Menganalisis paket

Ada dua dependensi utama dalam aplikasi:

• Firebase: platform yang menyediakan sejumlah layanan yang berguna untuk aplikasi iOS, Android, atau web. Di sini, Realtime Database digunakan untuk menyimpan dan menyinkronkan informasi untuk setiap anak kucing secara real time.
• Moment.js: library utilitas yang memudahkan penanganan tanggal di JavaScript. Tanggal lahir setiap anak kucing disimpan dalam database Firebase, dan moment digunakan untuk menghitung usianya dalam hitungan minggu.

Bagaimana dua dependensi dapat berkontribusi pada ukuran paket hampir 1 MB? Nah, salah satu alasannya adalah setiap dependensi pada gilirannya dapat memiliki dependensi sendiri, sehingga ada lebih dari dua jika setiap kedalaman/cabang "hierarki" dependensi dipertimbangkan. Aplikasi mudah menjadi besar dengan relatif cepat jika banyak dependensi disertakan.

Menganalisis pemaket untuk mendapatkan ide yang lebih baik tentang apa yang terjadi. Ada sejumlah alat buatan komunitas yang dapat membantu melakukannya, seperti webpack-bundle-analyzer.

Paket untuk alat ini sudah disertakan dalam aplikasi sebagai devDependency.

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

Artinya, file ini dapat digunakan langsung dalam file konfigurasi webpack. Impor di awal webpack.config.js:

const path = require("path");

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

Sekarang tambahkan sebagai plugin di bagian paling akhir file dalam array plugins:

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

Saat aplikasi dimuat ulang, Anda akan melihat visualisasi seluruh paket, bukan aplikasi itu sendiri.

Tidak selucu melihat beberapa anak kucing 🐱, tetapi sangat membantu. Mengarahkan kursor ke salah satu paket akan menampilkan ukurannya yang direpresentasikan dalam tiga cara yang berbeda:

Dengan alat webpack-bundle-analyzer, lebih mudah untuk mengidentifikasi paket yang tidak digunakan atau tidak diperlukan yang membentuk persentase besar paket.

Menghapus paket yang tidak digunakan

Visualisasi menunjukkan bahwa paket firebase terdiri dari banyak lebih dari sekadar database. Paket ini mencakup paket tambahan seperti:

• firestore
• auth
• storage
• messaging
• functions

Semua ini adalah layanan luar biasa yang disediakan oleh Firebase (dan lihat dokumentasi untuk mempelajari lebih lanjut), tetapi tidak ada satu pun yang digunakan dalam aplikasi, sehingga tidak ada alasan untuk mengimpor semuanya.

Kembalikan perubahan di webpack.config.js untuk melihat aplikasi lagi:

• Hapus BundleAnalyzerPlugin di daftar plugin:

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

• Sekarang, hapus impor yang tidak digunakan dari bagian atas file:

const path = require("path");

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

Aplikasi sekarang akan dimuat secara normal. Ubah src/index.js untuk memperbarui impor Firebase.

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

Sekarang, saat aplikasi dimuat ulang, peringatan DevTools tidak akan ditampilkan. Membuka panel Network DevTools juga menunjukkan pengurangan ukuran paket yang bagus:

Lebih dari setengah ukuran paket telah dihapus. Firebase menyediakan berbagai layanan dan memberi developer opsi untuk hanya menyertakan layanan yang benar-benar diperlukan. Dalam aplikasi ini, hanya firebase/database yang digunakan untuk menyimpan dan menyinkronkan semua data. Impor firebase/app, yang menyiapkan platform API untuk setiap layanan yang berbeda, selalu diperlukan.

Banyak library populer lainnya, seperti lodash, juga memungkinkan developer mengimpor berbagai bagian paket secara selektif. Tanpa melakukan banyak pekerjaan, mengupdate impor library dalam aplikasi agar hanya menyertakan yang digunakan dapat menghasilkan peningkatan performa yang signifikan.

Meskipun ukuran paket telah dikurangi cukup banyak, masih ada pekerjaan yang harus dilakukan. 😈

Menghapus paket yang tidak diperlukan

Tidak seperti Firebase, mengimpor bagian library moment tidak dapat dilakukan dengan mudah, tetapi mungkin dapat dihapus sepenuhnya?

Ulang tahun setiap anak kucing lucu disimpan dalam format Unix (milidetik) di database Firebase.

Ini adalah stempel waktu tanggal dan waktu tertentu yang diwakili oleh jumlah milidetik yang telah berlalu sejak 1 Januari 1970 00.00 UTC. Jika tanggal dan waktu saat ini dapat dihitung dalam format yang sama, fungsi kecil untuk menemukan usia setiap anak kucing dalam minggu mungkin dapat dibuat.

Seperti biasa, jangan menyalin dan menempelkan kode saat Anda mengikuti tutorial di sini. Mulai dengan menghapus moment dari impor di src/index.js.

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

Ada pemroses peristiwa Firebase yang menangani perubahan nilai dalam database kami:

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

Di atas ini, tambahkan fungsi kecil untuk menghitung jumlah minggu dari tanggal tertentu:

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

Dalam fungsi ini, perbedaan dalam milidetik antara tanggal dan waktu saat ini (new Date).getTime() dan tanggal lahir (argumen birthDate, sudah dalam milidetik) dihitung dan dibagi dengan jumlah milidetik dalam satu minggu.

Terakhir, semua instance moment dapat dihapus dalam pemroses peristiwa dengan memanfaatkan fungsi ini:

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>
    `})
});

Sekarang muat ulang aplikasi dan lihat panel Jaringan sekali lagi.

Ukuran paket kami kembali dikurangi lebih dari setengahnya.

Kesimpulan

Dengan codelab ini, Anda akan memiliki pemahaman yang baik tentang cara menganalisis paket tertentu dan mengapa paket yang tidak digunakan atau paket yang tidak diperlukan sangat berguna. Sebelum Anda mulai mengoptimalkan aplikasi dengan teknik ini, penting untuk mengetahui bahwa hal ini dapat menjadi jauh lebih kompleks dalam aplikasi yang lebih besar.

Sehubungan dengan menghapus library yang tidak digunakan, coba cari tahu bagian paket mana yang digunakan dan mana yang tidak. Untuk paket yang terlihat misterius dan sepertinya tidak digunakan di mana pun, pertimbangkan kembali dan periksa dependensi tingkat teratas yang mungkin memerlukannya. Coba temukan cara untuk membedakan keduanya.

Dalam hal menghapus library yang tidak diperlukan, hal-hal dapat menjadi sedikit lebih rumit. Anda harus bekerja sama dengan tim dan melihat apakah ada potensi untuk menyederhanakan bagian codebase. Menghapus moment dalam aplikasi ini mungkin terlihat seperti hal yang tepat untuk dilakukan setiap saat, tetapi bagaimana jika ada zona waktu dan lokalitas yang berbeda yang perlu ditangani? Atau bagaimana jika ada manipulasi tanggal yang lebih rumit? Hal-hal dapat menjadi sangat rumit saat memanipulasi dan mengurai tanggal/waktu, dan library seperti moment dan date-fns menyederhanakannya secara signifikan.

Semuanya adalah kompromi, dan penting untuk mengukur apakah solusi kustom itu sepadan dengan kompleksitas dan upaya untuk meluncurkannya, bukan mengandalkan library pihak ketiga.