Tailwind CSS Saugaus sąrašo sudarymas: Dinamiškų klasių pavadinimų apsauga gamyboje

Tailwind CSS yra „utility-first“ CSS sistema, kuri suteikia platų iš anksto nustatytų klasių asortimentą jūsų interneto programoms stilizuoti. Nors jos „utility-first“ požiūris siūlo neprilygstamą lankstumą ir greitį kūrimo procese, jis taip pat gali sukelti didelius CSS failus gamyboje, jei nėra tinkamai valdomas. Čia į pagalbą ateina saugaus sąrašo sudarymas (taip pat žinomas kaip baltasis sąrašas). Saugaus sąrašo sudarymas yra procesas, kai aiškiai nurodoma Tailwind CSS, kuriuos klasių pavadinimus ketinate naudoti savo projekte, leidžiant jam atmesti visas kitas nenaudojamas klases kūrimo proceso metu. Tai žymiai sumažina jūsų CSS failo dydį, todėl pagreitėja puslapio įkėlimo laikas ir pagerėja našumas.

Saugaus sąrašo sudarymo poreikio supratimas

Pagal numatytuosius nustatymus Tailwind CSS generuoja tūkstančius CSS klasių. Jei įtrauktumėte visas šias klases į savo gamybos versiją, net jei naudotumėte tik nedidelę jų dalį, jūsų CSS failas būtų be reikalo didelis. Tai paveikia jūsų svetainės našumą keliais būdais:

Padidėjęs failo dydis: Didesni failai užtrunka ilgiau atsisiųsti, ypač esant lėtesniems ryšiams.
Lėtesnis analizavimas: Naršyklės turi išanalizuoti visą CSS failą prieš atvaizduodamos puslapį, o tai gali pridėti nemažai vėlavimo.
Iššvaistytas pralaidumas: Vartotojai sunaudoja daugiau pralaidumo, kad atsisiųstų didelį CSS failą, o tai ypač svarbu mobiliesiems vartotojams.

Saugaus sąrašo sudarymas sprendžia šias problemas selektyviai įtraukdamas tik tas klases, kurias iš tikrųjų naudojate, todėl CSS failas tampa žymiai mažesnis ir efektyvesnis. Šiuolaikinė interneto kūrimo praktika reikalauja lieso ir optimizuoto kodo. Saugaus sąrašo sudarymas su Tailwind CSS yra ne tik geriausia praktika; tai būtinybė norint pateikti našias interneto programas.

Dinamiškų klasių pavadinimų iššūkiai

Nors saugaus sąrašo sudarymas yra labai svarbus, jis kelia iššūkį, kai naudojate dinamiškus klasių pavadinimus. Dinamiški klasių pavadinimai yra tie, kurie generuojami arba modifikuojami vykdymo metu, dažnai remiantis vartotojo įvestimi, duomenimis, gautais iš API, arba sąlygine logika jūsų JavaScript kode. Šias klases sunku numatyti pradiniame Tailwind CSS kūrimo procese, nes įrankiai negali „matyti“, kad klasių prireiks.

Pavyzdžiui, apsvarstykite scenarijų, kai dinamiškai taikote fono spalvas pagal vartotojo nuostatas. Galite turėti spalvų parinkčių rinkinį (pvz., `bg-red-500`, `bg-green-500`, `bg-blue-500`) ir naudoti JavaScript, kad pritaikytumėte atitinkamą klasę pagal vartotojo pasirinkimą. Tokiu atveju Tailwind CSS gali neįtraukti šių klasių į galutinį CSS failą, nebent aiškiai jas įtrauktumėte į saugų sąrašą.

Kitas dažnas pavyzdys yra dinamiškai generuojamas turinys su susijusiais stiliais. Įsivaizduokite, kad kuriate prietaisų skydelį, kuriame rodomi įvairūs valdikliai, kurių kiekvienas turi unikalų stilių, nulemtą jo tipo ar duomenų šaltinio. Konkrečios Tailwind CSS klasės, pritaikytos kiekvienam valdikliui, gali priklausyti nuo rodomų duomenų, todėl sunku jas iš anksto įtraukti į saugų sąrašą. Tai taip pat taikoma komponentų bibliotekoms, kai norite, kad galutinis vartotojas naudotų kai kurias CSS klases.

Dinamiškų klasių pavadinimų saugaus sąrašo sudarymo metodai

Yra keletas strategijų, kaip sudaryti dinamiškų klasių pavadinimų saugų sąrašą Tailwind CSS. Geriausias požiūris priklauso nuo jūsų projekto sudėtingumo ir dinamikos laipsnio.

1. `safelist` parinkties naudojimas faile `tailwind.config.js`

Paprastasis metodas yra naudoti `safelist` parinktį savo `tailwind.config.js` faile. Ši parinktis leidžia aiškiai nurodyti klasių pavadinimus, kurie visada turėtų būti įtraukti į galutinį CSS failą.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  safelist: [
    'bg-red-500',
    'bg-green-500',
    'bg-blue-500',
    'text-xl',
    'font-bold',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Argumentai „už“:

Paprasta ir lengva įgyvendinti esant nedideliam skaičiui dinamiškų klasių.
Suteikia aiškią kontrolę, kurios klasės yra įtrauktos.

Argumentai „prieš“:

Gali tapti sudėtinga, jei turite daug dinamiškų klasių.
Reikia rankiniu būdu atnaujinti failą `tailwind.config.js` kiekvieną kartą, kai pridedate arba pašalinate dinamiškas klases.
Nėra gerai keičiamas labai dinamiškiems scenarijams, kai klasių pavadinimai yra tikrai nenuspėjami.

2. Reguliarių išraiškų naudojimas `safelist`

Sudėtingesniems scenarijams galite naudoti reguliarias išraiškas `safelist` parinktyje. Tai leidžia jums suderinti klasių pavadinimų modelius, o ne aiškiai išvardyti kiekvieną iš jų.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  safelist: [
    /^bg-.*-500$/,
    /^text-./, // pavyzdys, kaip suderinti visas teksto klases
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Šiame pavyzdyje reguliari išraiška `/^bg-.*-500$/` atitiks bet kurį klasių pavadinimą, kuris prasideda `bg-`, po kurio seka bet kokie simboliai (`.*`), po to seka `-500`. Tai apims tokias klases kaip `bg-red-500`, `bg-green-500`, `bg-blue-500` ir net `bg-mycustomcolor-500`.

Argumentai „už“:

Lankstesnis nei aiškiai išvardyti klasių pavadinimus.
Gali apdoroti platesnį dinamiškų klasių spektrą su vienu įrašu.

Argumentai „prieš“:

Reikalauja gero reguliarių išraiškų supratimo.
Gali būti sunku sukurti tikslias ir efektyvias reguliarias išraiškas sudėtingiems scenarijams.
Gali netyčia įtraukti klases, kurių jums iš tikrųjų nereikia, o tai gali padidinti jūsų CSS failo dydį.

3. Dinaminio saugaus sąrašo generavimas kūrimo metu

Labai dinamiškiems scenarijams, kai klasių pavadinimai yra tikrai nenuspėjami, galite sugeneruoti dinaminį saugų sąrašą kūrimo proceso metu. Tai apima jūsų kodo analizę, siekiant nustatyti dinamiškus klasių pavadinimus, ir tada įtraukti juos į `safelist` parinktį prieš paleidžiant Tailwind CSS.

Šis požiūris paprastai apima kūrimo scenarijaus (pvz., Node.js scenarijaus) naudojimą, kad:

Išanalizuokite savo JavaScript, TypeScript ar kitus kodo failus.
Nustatykite galimus dinamiškus klasių pavadinimus (pvz., ieškant eilutės interpoliacijos arba sąlyginės logikos, generuojančios klasių pavadinimus).
Sugeneruokite `safelist` masyvą, kuriame būtų nurodyti nustatyti klasių pavadinimai.
Atnaujinkite savo `tailwind.config.js` failą su sugeneruotu `safelist` masyvu.
Paleiskite Tailwind CSS kūrimo procesą.

Tai yra sudėtingiausias požiūris, tačiau jis siūlo didžiausią lankstumą ir tikslumą apdorojant labai dinamiškus klasių pavadinimus. Šiuo tikslu galite naudoti tokius įrankius kaip `esprima` arba `acorn` (JavaScript analizatorius), kad išanalizuotumėte savo kodo bazę. Labai svarbu turėti gerą testavimo aprėptį šiam metodui.

Štai supaprastintas pavyzdys, kaip galite tai įgyvendinti:

// build-safelist.js
const fs = require('fs');
const glob = require('glob');

// Funkcija, skirta išgauti galimas Tailwind klases iš eilutės (labai paprastas pavyzdys)
function extractClasses(content) {
  const classRegex = /(?:class(?:Name)?=["'])([^"]*)(?:["'])/g;  // Patobulinta reguliari išraiška
  let match;
  const classes = new Set();
  while ((match = classRegex.exec(content)) !== null) {
    const classList = match[1].split(/\s+/);
    classList.forEach(cls => {
      // Toliau patikslinkite tai, kad patikrintumėte, ar klasė *atrodo* kaip Tailwind klasė
      if (cls.startsWith('bg-') || cls.startsWith('text-') || cls.startsWith('font-')) {  // Supaprastintas Tailwind klasės patikrinimas
        classes.add(cls);
      }
    });
  }
  return Array.from(classes);
}


const files = glob.sync('./src/**/*.{js,jsx,ts,tsx}'); // Pakoreguokite glob šabloną, kad atitiktų jūsų failus

let allClasses = [];
files.forEach(file => {
  const content = fs.readFileSync(file, 'utf-8');
  const extractedClasses = extractClasses(content);
   allClasses = allClasses.concat(extractedClasses);
});

const uniqueClasses = [...new Set( allClasses)];

// Perskaitykite Tailwind konfigūraciją
const tailwindConfigPath = './tailwind.config.js';
const tailwindConfig = require(tailwindConfigPath);

// Atnaujinkite saugų sąrašą
tailwindConfig.safelist = tailwindConfig.safelist || []; // Užtikrinkite, kad saugus sąrašas egzistuotų
tailwindConfig.safelist = tailwindConfig.safelist.concat(uniqueClasses);

// Įrašykite atnaujintą konfigūraciją atgal į failą
fs.writeFileSync(tailwindConfigPath, `module.exports = ${JSON.stringify(tailwindConfig, null, 2)}`);

console.log('Tailwind konfigūracijos saugus sąrašas sėkmingai atnaujintas!');

Ir pakeiskite savo `package.json`, kad paleistumėte tai prieš kūrimo etapą:

{"scripts": {
  "build": "node build-safelist.js && next build",  // Arba jūsų kūrimo komanda
  ...
}}

Svarbūs aspektai atliekant kodo analizę:

Sudėtingumas: Tai sudėtinga technika, reikalaujanti pažangių JavaScript žinių.
Netikslūs teigiami rezultatai: Yra tikimybė, kad analizatorius nustatys eilutes, kurios atrodo kaip Tailwind klasės, bet iš tikrųjų yra kažkas kita. Patikslinkite reguliarią išraišką.
Našumas: Didelės kodo bazės analizė gali užtrukti. Optimizuokite analizės procesą kiek įmanoma.
Priežiūra: Analizės logika gali tapti sudėtinga ir sunkiai prižiūrima laikui bėgant.

Argumentai „už“:

Suteikia tiksliausią saugų sąrašą labai dinamiškiems klasių pavadinimams.
Automatizuoja `tailwind.config.js` failo atnaujinimo procesą.

Argumentai „prieš“:

Žymiai sudėtingiau įgyvendinti nei kitus metodus.
Reikalauja giliai suprasti savo kodo bazę ir tai, kaip generuojami dinamiški klasių pavadinimai.
Gali pridėti nemažai papildomų išlaidų kūrimo procesui.

4. Integruotų stilių naudojimas kaip paskutinė išeitis (paprastai nerekomenduojama)

Jei turite itin dinamiškų stilių, kurių negalima lengvai įtraukti į saugų sąrašą naudojant bet kurį iš aukščiau nurodytų metodų, galite apsvarstyti galimybę naudoti integruotus stilius kaip paskutinę išeitį. Tačiau šis požiūris paprastai nerekomenduojamas, nes jis paneigia tokios CSS sistemos kaip Tailwind CSS naudojimo tikslą.

Integruoti stiliai taikomi tiesiogiai HTML elementams, o ne apibrėžiami CSS faile. Tai gali sukelti keletą problemų:

Sumažintas prižiūrimumas: Integruotus stilius sunku valdyti ir atnaujinti.
Prastas našumas: Integruoti stiliai gali neigiamai paveikti puslapio įkėlimo laiką ir atvaizdavimo našumą.
Pakartotinio naudojimo trūkumas: Integruotų stilių negalima pakartotinai naudoti keliuose elementuose.

Jei turite naudoti integruotus stilius, pabandykite apriboti jų naudojimą tik pačiais dinamiškiausiais ir nenuspėjamiausiais stiliais. Apsvarstykite galimybę naudoti JavaScript bibliotekas, kurios gali padėti efektyviau valdyti integruotus stilius, pvz., React `style` prop arba Vue.js `:style` susiejimą.

Pavyzdys (React):

function MyComponent({ backgroundColor }) {
  return (
    
      {/* ... */}
    
  );
}

Geriausia Tailwind CSS saugaus sąrašo sudarymo praktika

Norėdami užtikrinti, kad jūsų Tailwind CSS saugaus sąrašo sudarymo strategija būtų veiksminga ir prižiūrima, laikykitės šių geriausių praktikų:

Pradėkite nuo paprasčiausio požiūrio: Pradėkite aiškiai išvardydami klasių pavadinimus `safelist` parinktyje. Pereikite prie sudėtingesnių metodų (pvz., reguliarių išraiškų arba dinaminių saugių sąrašų) tik jei reikia.
Būkite kuo konkretesni: Venkite naudoti per plačias reguliarias išraiškas, kurios gali apimti nereikalingas klases.
Kruopščiai išbandykite: Įdiegę bet kokią saugaus sąrašo sudarymo strategiją, kruopščiai išbandykite savo programą, kad įsitikintumėte, jog visi stiliai pritaikyti teisingai. Atkreipkite ypatingą dėmesį į dinamiškus elementus ir vartotojo sąveikas.
Stebėkite savo CSS failo dydį: Reguliariai tikrinkite sugeneruoto CSS failo dydį, kad įsitikintumėte, jog jūsų saugaus sąrašo sudarymo strategija veiksmingai sumažina failo dydį.
Automatizuokite procesą: Jei įmanoma, automatizuokite failo `tailwind.config.js` atnaujinimo procesą. Tai padės užtikrinti, kad jūsų saugus sąrašas visada būtų atnaujintas ir tikslus.
Apsvarstykite galimybę naudoti alternatyvą PurgeCSS: Jei vis dar turite problemų dėl savo CSS failo dydžio, apsvarstykite galimybę naudoti agresyvesnį CSS valymo įrankį, pvz., PurgeCSS, tačiau supraskite kompromisus.
Naudokite aplinkos kintamuosius: Norėdami valdyti savo saugaus sąrašo sudarymo strategijos elgseną skirtingose aplinkose (pvz., kūrimo, testavimo, gamybos), naudokite aplinkos kintamuosius. Tai leidžia jums lengvai perjungti skirtingas saugaus sąrašo sudarymo konfigūracijas nekeičiant kodo. Pavyzdžiui, galite išjungti saugaus sąrašo sudarymą kūrimo metu, kad būtų lengviau derinti stiliaus problemas.

Pavyzdiniai scenarijai su tarptautinėmis pasekmėmis

Saugus sąrašas tampa dar svarbesnis atsižvelgiant į programas su internacionalizavimo (i18n) ir lokalizavimo (l10n) funkcijomis.

Kalbos iš dešinės į kairę (RTL)

Kalbomis, tokiomis kaip arabų, hebrajų ir persų, tekstas teka iš dešinės į kairę. Tailwind CSS suteikia priemones RTL išdėstymams valdyti, tokias kaip `rtl:text-right` ir `ltr:text-left`. Tačiau šios priemonės įtraukiamos į galutinį CSS failą tik tuo atveju, jei jos aiškiai įtrauktos į saugų sąrašą arba jei jos aptinkamos jūsų šaltinio kode.

Jei jūsų programa palaiko RTL kalbas, įsitikinkite, kad įtraukėte atitinkamas RTL priemones į saugų sąrašą, kad jūsų išdėstymai būtų rodomi teisingai RTL aplinkose. Pavyzdžiui, galite naudoti reguliarią išraišką, pvz., `/^(rtl:|ltr:)/`, kad įtrauktumėte visas RTL ir LTR priemones į saugų sąrašą.

Skirtingos šriftų šeimos

Skirtingoms kalboms reikia skirtingų šriftų šeimų, kad simboliai būtų rodomi teisingai. Pavyzdžiui, kinų, japonų ir korėjiečių kalboms reikia šriftų, kurie palaiko CJK simbolius. Panašiai, kalboms su kirčiuotais simboliais gali prireikti šriftų, kuriuose yra tie simboliai.

Jei jūsų programa palaiko kelias kalbas, jums gali reikėti naudoti skirtingas šriftų šeimas skirtingoms kalboms. Galite naudoti `@font-face` taisyklę CSS, kad apibrėžtumėte pasirinktines šriftų šeimas, o tada naudoti Tailwind CSS, kad pritaikytumėte jas konkretiems elementams. Įsitikinkite, kad įtraukėte šriftų šeimų pavadinimus, kuriuos naudojate savo CSS, į saugų sąrašą, kad jie būtų įtraukti į galutinį CSS failą.

Pavyzdys:

/* Jūsų globaliame CSS faile */
@font-face {
  font-family: 'Noto Sans SC';
  src: url('/fonts/NotoSansSC-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans SC';
  src: url('/fonts/NotoSansSC-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

/* Jūsų tailwind.config.js */
module.exports = {
  // ...
  theme: {
    extend: {
      fontFamily: {
        'sans': ['Noto Sans SC', ...],
      },
    },
  },
  safelist: [
    'font-sans', // užtikrina, kad font-sans visada būtų įtrauktas
  ],
};

Kultūriniai stiliaus skirtumai

Kai kuriais atvejais stiliaus nuostatos gali skirtis priklausomai nuo kultūros. Pavyzdžiui, spalvų asociacijos gali labai skirtis nuo vienos kultūros prie kitos. Panašiai, kultūrinės normos taip pat gali paveikti tarpo ir tipografijos naudojimą.

Jei jūsų programa skirta pasaulinei auditorijai, atsižvelkite į šiuos kultūrinius skirtumus ir atitinkamai pritaikykite savo stilių. Tai gali apimti skirtingų CSS klasių naudojimą skirtingoms lokalėms arba leisti vartotojams tinkinti savo stiliaus nuostatas.

Išvada

Tailwind CSS saugaus sąrašo sudarymas yra labai svarbi gamybos aplinkos optimizavimo technika. Aiškiai nurodydami klasių pavadinimus, kurie turėtų būti įtraukti į galutinį CSS failą, galite žymiai sumažinti jo dydį, todėl pagreitės puslapio įkėlimo laikas ir pagerės našumas. Nors dinamiški klasių pavadinimai kelia iššūkį, yra keletas strategijų, kaip juos įtraukti į saugų sąrašą, pradedant nuo paprastų aiškių sąrašų ir baigiant sudėtingesniu dinaminiu saugių sąrašų generavimu. Laikydamiesi šiame vadove aprašytos geriausios praktikos, galite užtikrinti, kad jūsų Tailwind CSS saugaus sąrašo sudarymo strategija būtų veiksminga, prižiūrima ir pritaikoma prie unikalių jūsų projekto poreikių.

Nepamirškite teikti pirmenybę vartotojo patirčiai ir našumui savo interneto kūrimo projektuose. Saugaus sąrašo sudarymas su Tailwind CSS yra galingas įrankis šiems tikslams pasiekti.