Peer-riippuvuudet ja tree shaking

Vertaisriippuvuudet ilmoittavat paketit, joita kirjasto tarvitsee mutta joiden toimittamista se odottaa käyttäjältä. Kirjaston package.jsonissa React kuuluu kohtaan peerDependencies, ei kohtaan dependencies. Kun käyttäjä asentaa kirjaston, npm/yarn ei asenna Reactia automaattisesti — käyttäjän sovelluksessa on jo React, ja kirjastosi käyttää samaa instanssia.

Jos React on kirjastosi dependencies-osiossa, npm saattaa asentaa kuluttajan Reactin rinnalle toisen React-kopion. Kaksi React-instanssia samassa sovelluksessa rikkoo kaikki hookit ja aiheuttaa virheen "Invalid hook call". Kun React ilmoitetaan peerDependencyksi, npm:lle kerrotaan: "Tarvitsen Reactin, mutta käyttäkää sitä, joka kuluttajalla on jo."

Jotkin vertaisriippuvuudet voivat olla valinnaisia — esimerkiksi kirjasto, joka tukee sekä styled-componentsia että CSS Modulesia. Merkitkää valinnaiset vertaisriippuvuudet peerDependenciesMeta-asetuksella: { 'styled-components': { optional: true } }. npm ei varoita käyttäjiä puuttuvista valinnaisista vertaisriippuvuuksista, mutta TypeScript-tyypit voidaan silti tarjota, kun valinnainen paketti on asennettu.

package.jsonin sideEffects-kenttä kertoo bundlereille, onko kirjaston tree-shaking turvallista. Asetus "sideEffects": false kertoo webpackille, Rollupille ja vastaaville työkaluille, ettei minkään kirjaston moduulin tuominen aiheuta sivuvaikutuksia — kaikki käyttämättömät viennit voidaan poistaa turvallisesti käyttäjän nipusta.

CSS-tuonnit ovat yleinen sivuvaikutus: ne lisäävät tyylit sivulle tuonnin sivuvaikutuksena. Jos kirjasto tuo CSS-tiedostoja, asettakaa "sideEffects": ["*.css", "*.scss"] kertoaksenne bundlereille, että JS-tiedostot voidaan tree-shakata turvallisesti mutta CSS-tiedostot on aina sisällytettävä, kun ne tuodaan.

Parhaan tree-shakabilityn saavuttamiseksi viekää jokainen komponentti nimettynä vientinä omasta tiedostostaan. Viekää index.ts-tiedostossa kaikki uudelleen: export { Button } from './Button'. Kun käyttäjä tuo vain Buttonin, bundleri voi poistaa kaikki muut komponentit. Uudelleenvientejä sisältävät barrel-tiedostot mahdollistavat tämän mallin.

Käyttäkää bundlejs.com-palvelua tree-shakingin testaamiseen: liittäkää tuontilausekkeenne, ja palvelu ilmoittaa todellisen nipun koon. size-limit-npm-paketilla voitte määrittää kokobudjetit package.jsonissa ja keskeyttää CI:n, jos tuonnin koko ylittää rajan: "size-limit": [{ "path": "dist/index.js", "limit": "10 KB" }].

Määrittäkää kirjaston tuonneille kokobudjetti. Suorittakaa CI:ssä npx size-limit budjetin valvomiseksi. Nipunkoon kasvu ajan mittaan kertoo laajuuden hallitsemattomasta kasvusta. Keskittyneen komponenttikirjaston yksittäisten komponenttien tuontien tulisi pysyä muutamassa kilotavussa. Ilmoittakaa regressioista ennen kuin ne saavuttavat käyttäjät.

Välttäkää styled-componentsia ja Emotionia jaeltaviksi tarkoitetuissa komponenttikirjastoissa. Nämä ajonaikaiset CSS-in-JS-ratkaisut edellyttävät, että käyttäjä asentaa saman kirjaston ja version, mikä aiheuttaa vertaisriippuvuuksien ristiriitoja. Vaikka käyttäjä käyttäisi Tailwindiä tai tavallista CSS:ää, hänen on silti niputettava CSS-in-JS-ajonaikainen ympäristö. Suosikaa CSS Modulesia, joka kääntyy tavalliseksi CSS:ksi koontiaikana.

CSS Modules toimii kirjastoissa hyvin, kun sitä käytetään niitä käsittelevän bundlerin kanssa. tsup ja Rollup voivat upottaa CSS Modules -tulosteen rajatuiksi luokkanimiksi. Käyttäjän ei tarvitse määrittää mitään — tyylit on jo rajattu ja sisällytetty JS-nippuun tai erilliseen CSS-tiedostoon, joka tuodaan mukaan.

Omat kehitystyökalunne (tsup, TypeScript, testaustyökalut ja Storybook) kuuluvat kohtaan devDependencies — niitä tarvitaan vain kehityksen aikana, eikä niitä asenneta käyttäjien npm install -asennuksissa. React kuuluu sekä kohtaan peerDependencies (ajonaikainen vaatimus) että kohtaan devDependencies (sitä tarvitaan kirjaston kääntämiseen ja testaamiseen paikallisesti).

Ilmoittakaa React kohdassa peerDependencies, ei kohdassa dependencies, jotta käyttäjät jakavat sovelluksensa React-instanssin. sideEffects: false mahdollistaa kirjaston täydellisen tree-shakingin. Käyttäkää asetusta sideEffects: ['*.css'] suojaamaan CSS-tuonteja poistamiselta. Yksittäisistä tiedostoista tehdyt nimetyt viennit maksimoivat tree-shakingin rakeisuuden. Valvokaa CI:ssä kokobudjettia size-limitillä. Suosikaa kirjastoissa CSS Modulesia CSS-in-JS:n sijaan vertaisriippuvuuksien ristiriitojen välttämiseksi.