Dependensi Peer dan Tree Shaking

Dependensi rekan menyatakan paket yang diperlukan pustaka Anda, tetapi diharapkan disediakan oleh konsumen. Dalam package.json pustaka Anda, React harus berada di peerDependencies, bukan di dependencies. Saat pengguna memasang pustaka Anda, npm/yarn tidak memasang React secara otomatis—aplikasi pengguna sudah memiliki React, dan pustaka Anda berbagi instans tersebut.

Jika React berada di dependencies pustaka Anda, npm mungkin memasang salinan React kedua di samping React milik konsumen. Dua instans React dalam aplikasi yang sama merusak semua pengait dan menyebabkan kesalahan "Invalid hook call". Dengan mendeklarasikan React sebagai peerDependency, Anda memberi tahu npm, "Saya memerlukan React, tetapi gunakan yang sudah dimiliki konsumen."

Beberapa dependensi rekan mungkin bersifat opsional—misalnya, pustaka yang mendukung styled-components dan Modul CSS. Tandai rekan opsional menggunakan peerDependenciesMeta: { 'styled-components': { optional: true } }. npm tidak akan memperingatkan pengguna tentang rekan opsional yang tidak ada, tetapi tipe TypeScript tetap dapat disediakan saat paket opsional tersebut dipasang.

Kolom sideEffects dalam package.json memberi tahu pembuat bundel apakah pustaka Anda aman untuk diproses dengan penghapusan kode yang tidak digunakan. Menetapkan "sideEffects": false memberi tahu webpack, Rollup, dan peralatan serupa bahwa mengimpor modul apa pun dari pustaka Anda tidak menimbulkan efek samping—semua ekspor yang tidak digunakan dapat dihapus dengan aman dari bundel konsumen.

Impor CSS adalah efek samping yang umum—impor tersebut menyisipkan gaya ke halaman sebagai efek samping dari proses impor. Jika pustaka Anda mengimpor berkas CSS, tetapkan "sideEffects": ["*.css", "*.scss"] untuk memberi tahu pembuat bundel bahwa berkas JS aman diproses dengan penghapusan kode yang tidak digunakan, tetapi berkas CSS harus selalu disertakan saat diimpor.

Untuk memaksimalkan penghapusan kode yang tidak digunakan, ekspor setiap komponen sebagai ekspor bernama dari berkasnya sendiri. Dalam index.ts, ekspor ulang semuanya: export { Button } from './Button'. Saat konsumen hanya mengimpor Button, pembuat bundel dapat menghapus semua komponen lainnya. Berkas pengumpul dengan ekspor ulang memungkinkan pola ini.

Gunakan bundlejs.com untuk menguji penghapusan kode yang tidak digunakan: tempelkan pernyataan impor Anda dan situs tersebut akan melaporkan ukuran bundel sebenarnya. Paket npm size-limit memungkinkan Anda menentukan anggaran ukuran dalam package.json dan menggagalkan CI jika ukuran impor melebihi batas: "size-limit": [{ "path": "dist/index.js", "limit": "10 KB" }].

Tetapkan anggaran ukuran untuk impor pustaka Anda. Jalankan npx size-limit di CI untuk menegakkannya. Pertumbuhan dampak bundel dari waktu ke waktu menunjukkan perluasan cakupan. Pustaka komponen yang terfokus sebaiknya menjaga impor setiap komponen tetap di bawah beberapa kilobita. Beri peringatan tentang regresi sebelum regresi tersebut sampai ke konsumen.

Hindari styled-components dan Emotion dalam pustaka komponen yang ingin Anda distribusikan. Solusi CSS-dalam-JS saat runtime ini mengharuskan konsumen memasang pustaka dan versi yang sama, sehingga menimbulkan konflik dependensi rekan. Jika konsumen menggunakan Tailwind atau CSS biasa, mereka tetap harus membundel runtime CSS-dalam-JS. Sebaiknya gunakan Modul CSS, yang dikompilasi menjadi CSS biasa saat proses kompilasi.

Modul CSS berfungsi baik dalam pustaka jika dipadukan dengan pembuat bundel yang memprosesnya. tsup dan Rollup dapat menyertakan keluaran Modul CSS sebagai nama kelas dengan cakupan terbatas. Konsumen tidak perlu mengonfigurasi apa pun—gaya tersebut sudah memiliki cakupan terbatas dan disertakan dalam bundel JS atau sebagai berkas CSS terpisah yang diimpor.

Peralatan pengembangan Anda sendiri (tsup, TypeScript, pustaka pengujian, Storybook) dimasukkan ke devDependencies—peralatan tersebut hanya diperlukan selama pengembangan dan tidak disertakan dalam pemasangan npm bagi konsumen. React dimasukkan ke peerDependencies (persyaratan saat runtime) dan devDependencies (diperlukan untuk mengompilasi serta menguji pustaka Anda secara lokal).

Deklarasikan React dalam peerDependencies (bukan dependencies) agar konsumen berbagi instans React dari aplikasi mereka. sideEffects: false mengaktifkan penghapusan penuh kode pustaka yang tidak digunakan. Gunakan sideEffects: ['*.css'] untuk mencegah penghapusan impor CSS. Ekspor bernama dari berkas individual memaksimalkan tingkat perincian penghapusan kode. Tegakkan anggaran ukuran dengan size-limit di CI. Pilih Modul CSS daripada CSS-dalam-JS dalam pustaka untuk menghindari konflik dependensi rekan.