Get best of the week

Hentikan mengimpor seluruh paket JavaScript

Seberapa sering Anda pernah mengimpor seluruh paket JavaScript ke proyek ketika Anda hanya perlu menggunakan sedikit fitur dari paket ini? Anda mungkin dapat mengingat banyak kasus seperti itu.

Contoh nyata dari paket yang diimpor seluruhnya, hanya membutuhkan beberapa fungsinya, dapat disebut perpustakaan Lodash . Jika Anda belum pernah mendengar tentang perpustakaan ini - Anda harus melihat pada dokumentasinya. Secara khusus, di situs web proyek Anda dapat mengetahui bahwa Lodash menyederhanakan pengembangan JavaScript dengan mengambil tugas bekerja dengan array, angka, objek, dan sejenisnya.



Perpustakaan Lodash mencakup lebih dari 200 fungsi. Ini menunjukkan bahwa dia, memang, mampu membantu programmer dalam memecahkan banyak masalah. Tetapi mungkin terjadi bahwa dengan mengimpor seluruh perpustakaan, hanya 4-5 fungsi yang akan dipanggil. Ini membawa kita pada pertanyaan tentang kelayakan mengimpor seluruh paket dalam situasi di mana hanya 2-3% dari kemampuannya akan digunakan. Mari kita pikirkan cara menangani ini.

Lodash mendapatkan fungsi


Salah satu fitur favorit saya dari perpustakaan Lodash adalah fitur tersebut get. Ini memungkinkan Anda untuk mengatur akses aman ke objek bersarang dan mendukung penggunaan nilai default.

Berikut adalah contoh penggunaan fungsi ini:

const _ = require('lodash');

let employee1 = {
  name : "Jon",
  address : {
    street : "North Avenue",
    area : "DAC",
    zip : "87344",
    contact : [ 12444554, 9384847 ]
  },
  designation : "Manager"
};

let employee2 = {
  name : "Jake",
  designation : "Senior Manager"
};

function getHomeContact(employee) {
  return employee.address.contact;
}

getHomeContact(employee1); // [12444554, 9384847]
getHomeContact(employee2); // Uncaught TypeError: Cannot read property 'contact' of undefined

function getHomeContactWithLodash(employee) {
  return  _.get(employee, "address.contact", []);
}

getHomeContactWithLodash(employee1); // [12444554, 9384847]
getHomeContactWithLodash(employee2); // []

Menggunakan fungsi ini memungkinkan Anda untuk membuat kode lebih bersih dari sebelumnya. Ini membantu untuk menghindari kesalahan karena fakta bahwa ketika array kosong diharapkan, fungsi tidak akan kembali null. Berkat fungsi ini, Anda tidak dapat, secara tidak sengaja, memanggil metode mappada array kosong. Ini melindungi dari masalah lain.

Mari kita lihat bagaimana dimasukkannya pustaka Lodash dalam proyek jika direncanakan untuk menggunakan hanya fungsi yang akan mempengaruhi ukuran bundel get. Eksperimen akan dilakukan menggunakan proyek Bereaksi. Ukuran bundel akan dianalisis sebelum mengimpor perpustakaan dan setelah berbagai opsi untuk menghubungkannya ke proyek.

Ukuran proyek sebelum mengimpor perpustakaan


Kami menganalisis ukuran file proyek sebelum mengimpor perpustakaan.


Ukuran file sebelum menggunakan Lodash

Sekarang, mari kita lihat konsekuensi dari beberapa cara untuk mengimpor perpustakaan ke proyek.

Ukuran proyek setelah menggunakan metode impor pustaka yang berbeda


▍1. Impor tradisional


Ini tentang mengimpor perpustakaan dengan salah satu cara tradisional berikut.

Pertama:

import _ from ‘lodash’;

Kedua:

const _ = require('lodash');

Inilah cara ini akan memengaruhi ukuran akhir dari file proyek.


Mengubah ukuran file proyek saat mengimpor seluruh paket

▍2. Impor ES6


Di sini, sekali lagi, kami memiliki dua opsi.

Pertama:

import { get } from 'lodash';

Kedua:

const { get } = require('lodash');

Mari kita lihat efek dari impor tersebut pada ukuran file proyek.


Ukuran file saat mengimpor fungsi get menggunakan penugasan destruktif

Seperti yang Anda lihat, menggunakan kedua pendekatan di atas menyebabkan peningkatan ukuran file sekitar 23 Kb. Dan ini adalah peningkatan yang sangat signifikan, terutama mengingat bahwa kita berbicara tentang menggunakan satu fungsi dari perpustakaan, yang mencakup lebih dari 200 fungsi. Akibatnya, ternyata ukuran bundel telah meningkat sebanyak yang diharapkan akan meningkat jika semua 200 fungsi ini digunakan dalam proyek.

Mungkin 23 Kb bukan harga yang mahal untuk menggunakan satu-satunya fungsi yang diperlukan? Tidak, itu terlalu banyak. 

Apakah ada cara di mana Anda hanya dapat mengimpor apa yang Anda butuhkan ke proyek? Ya, ada cara seperti itu.

Mari kita menganalisis folder tempat materi Lodash disimpan.

Untuk melakukan ini, jalan saja node_modules/lodash. Dalam folder ini Anda dapat menemukan banyak file di mana kode fungsi individu disimpan. Di antara mereka, mudah untuk menemukan file get.jsdi mana kode fungsi yang kami minati berada get. Dan ini berarti bahwa jika kita hanya memerlukan suatu fungsi, getcukup dengan hanya mengimpor file ini ke proyek. Ini membawa kita ke metode impor ketiga.

▍3. Impor file get.js dari Lodash


Di sini, sekali lagi, dua metode tersedia.

Pertama:

import get from 'lodash/get';

Kedua:

const get = require('lodash/get');

Lihatlah mengubah ukuran bundel.


Ukuran file saat mengimpor file get.js

Dapat dilihat bahwa karena kami hanya mengimpor file ke dalam proyekget.js, kami dapat menyingkirkan lebih dari 20 Kb kode yang tidak perlu yang masuk ke bundel saat menggunakan metode lain. Tetapi kita hanya berbicara tentang satu paket. Proyek JavaScript yang khas memiliki lebih banyak ketergantungan. Bayangkan bagaimana pendekatan yang hati-hati untuk mengimpor paket dan kontrol konstan ukuran bundel dapat memengaruhi proyek server atau klien.

Apakah semua paket mendukung pendekatan impor selektif?


Tidak semuanya. Ini sepenuhnya tergantung pada organisasi file paket. Tetapi, untungnya, sebagian besar paket populer yang cukup besar disusun sehingga, dengan bekerja dengannya, mudah untuk mengatur impor selektif dari kemampuan masing-masing.

Bagaimana melakukan hal yang sama saat bekerja dengan perpustakaan lain?


Proses menghapus kode yang tidak digunakan dikenal sebagai pengocokan pohon. Jika Anda perlu, misalnya, untuk "mengguncang pohon" dari perpustakaan Desain Ant - cari di Internet untuk kata-kata "antd tree shaking". Anda mungkin menemukan diskusi tentang subjek ini di StackOverflow atau di GitHub. Setelah menemukan diskusi seperti itu - lihatlah melalui itu - sangat mungkin bahwa seseorang telah menyelesaikan tugas sebelum Anda.

Cara lain untuk menghilangkan kode yang tidak perlu membutuhkan sedikit usaha lagi. Anda harus masuk ke folder paket yang berada di node_modules, dan melakukan analisis kode. Secara khusus, Anda harus tertarik pada struktur proyek dan mencari tahu apakah itu dibagi menjadi modul-modul kecil yang dapat diimpor ke proyek secara independen satu sama lain.

Impor contoh pengoptimalan menggunakan paket antd


Sebelum:

import { Menu} from 'antd';

Setelah:

import Menu from 'antd/es/menu';
import 'antd/es/menu/style/css';

Impor contoh optimasi menggunakan paket material-ui


Sebelum:

import { Button } from '@material-ui/core';

Setelah:

import Button from '@material-ui/core/Button';

Impor contoh pengoptimalan menggunakan paket momen


Mengoptimalkan momen impor pustaka terlihat sedikit lebih rumit. Oleh karena itu, jika Anda membutuhkannya, lihat tugas yang saya buat di pelacak tugas perpustakaan ini.

Ringkasan


Anda sendiri dapat memastikan bahwa banyak kode yang tidak perlu masuk ke proyek Anda. Anda dapat memecahkan masalah ini dengan membandingkan dengan hati-hati apa yang Anda impor dengan yang Anda gunakan. Ini akan memungkinkan Anda, misalnya, untuk mengurangi waktu pemuatan situs Anda. Oleh karena itu, Anda disarankan untuk secara hati-hati memonitor ukuran bundel proyek dan mengoptimalkan impor ketergantungan.

Dan bagaimana Anda, dalam proyek JavaScript Anda, berjuang dengan mengimpor kode yang tidak perlu?

More articles:


All Articles