Bootstrap CSS-i seadistamine Vite.js ja PurgeCSS-iga

Selles artiklis, vastupididelt siinse blogi mõttele, ei tule juttu Framerist, vaid hoopis CSS-raamistikust Bootstrap ja täpsemini Bootstrapi optimeerimisest. Lisaks on siin juttu ka "bundeldamisvahenditest" (Vite, Webpack, Parcel jms), missugune väljend on jabur, aga tähendab umbes arendusvahendeid, mille abil oma rakendus arendusmasinas püsti panna, jooksutada testserverit ja lõpuks pakkida valmis lahendus kenaks esitluskõlbulikuks pakiks, mis serverisse vms kohta pista. (Kui sa päriselt otsid mingit "setup'i" abi, siis võid kohe alla liikuda.)

Erinevalt TailwindCSS-ist, ei ole Bootstrapil sisse ehitatud lahendust, mis puhastaks CSS-faili üleliigsest koodist

Ma vähemalt loodan, et ei ole, sest teisel juhul ajaksin ma siin jama (mida ma muidugi teen vaatamata sellele, aga siiski).

Teadupärast on Bootstrap aja jooksul jõledamaks monstrumiks kasvanud (no pingutasin iseloomustusega muidugi üle). Kuna temaga saab kõike teha, on ta ka päris pirakas. Kui koodi on palju, kipub Google Lighthouse, mille abil on võimalik lehe kiirust mõõta, sel teemal ka märkusi tegema ja lehe tulemusi allpoole sikutama.

Bootstrap ise pakub võimaluse, et sa ei pea kasutama kõiki tema võimalusi, paigaldades vaid sulle vajalikud stiililehed, ent ka sel juhul jääb hulgem kasutut materjali ikka üles.

PurgeCSS ja Vite.js

Üks selliseid lahendusi, mis puhastab koodi nendest CSS ridadest, mida leht tegelikult ei kasuta, on PurgeCSS. Mitmel CSS-raamistikul on kõnealune vidin juba sisse ehitatud, aga mitte Bootstrap CSS-il.

Bootstrap ise otseselt juhist ei anna, kuis ennast PurgeCSS abil puhtaks ja kombeliseks muuta, vaid suunab paarile blogiartiklile, mis juhendavad, kuidas seadistada PurgeCSS WebPack'iga toimetama. Mina Webpacki kasutada ei plaaninud, ent proovisin juhendite järgi Vite'le sobivat lahendust ehitada, ent ei saanud rahuldavat tulemust. See tähendab, et mina neid käima ei saanud.

Googeldades ning ChatGPT, Google Bard'i ja Claude.ai abil sain niikaugele, et esimene töötav lahendus oli vite-plugin-purgecss. Ent tolle kohta andis sama leht hoiatuse "Unpopular package" ja et on kaks kriitilist probleemi. Kuna mina esindan inimkonna lollimat poolt, siis mõtlesin, et see kõik on hirmus ja, et otsin midagi paremat.

Teiseks töötavaks lahenduseks leidsin pistikptogrammi nimega vite-plugin-html-purgecss, mille peamine probleem oli selles, et selle kohta EI OLNUD öeldud, et tal on kriitilisi probleeme või, et ta on ebapopulaarne, mis tundus jälle kahtlane.

Seega

PostCSS

Agara googeldamise tulemusena võttis seljaaju jooksvalt vastu infot, mis rääkis PostCSS-ist ja selle lähedastest sidemetest PurgeCSS-iga, mistap ma lõpuks, eriti teades, et Tailwind opereerib PostCSS-iga vaatasin lihtsalt järgi, et ma saan installida PostCSS'i ja sellele PurgeCSS'i plugina, mis tegigi töö ära ja seejärel, tuletades kuskilt meelde, et Vite.js'le on PostCSS juba niigi sisse ehitatud, mistap võib ka selle PostCSS'i paigaldamise ära jätta ja saingi sobiva töökorralduse.

Seega asi oli lihtsam kui vaja ja kui tahad seda postitust abimaterjalina kasutada, alusta siit ehk lõpust – installi oma Vite,js töövoogu lihtsalt "@fullhuman/postcss-purgecss" plugin:

npm i -D @fullhuman/postcss-purgecss postcss

Lisa oma vite.config.js faili vajalik seadistus:

import { defineConfig } from 'vite'
import purgecss from '@fullhuman/postcss-purgecss';

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        process.env.NODE_ENV === 'production'
          ? purgecss({
              content: ['./index.html', './src/**/*.js'], //siin näitad ära, mis failidest peaks css´ i kasutust otsima
              defaultExtractor: content =>
                content.match(/[\w-/:]+(?<!:)/g) || []
            })
          : undefined
      ].filter(Boolean) // Removes any undefined plugins
    }
  }
})

Ja ongi kõik, võid oma rakenduse lõpptoodanguks lasta kasutades npm run build käsklust.

Noh, see tähendab, kui ma nüüüd midagi vahelt ära ei unustanud.

Aa, ja kui vaja mingid css-i jupid puutumata jätta, siis selle jaoks pistetakse nad conf failis "whitelisti", seda ma testin edaspidi.

Ülalolev näide on Vite "vanilla" templiidiga. Bootstrap 5 setupi puhul töötab nt see:

const path = require("path");
const purgecss = require("@fullhuman/postcss-purgecss");

export default {
  plugins: [
    process.env.NODE_ENV === "production"
      ? purgecss({
          content: ["./index.html", "./src/**/*.js"], 
          defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
        })
      : undefined,
  ],
  // need siin allpool on teised asjad – serveri port ja valmis meisterdatud asjade folderi asukoht jms.
  root: path.resolve(__dirname, "src"),
  build: {
    outDir: "../dist",
  },
  server: {
    port: 8080,
  },
};

" import { defineConfig } from 'vite' " peaks tegeliult mõlemal juhul õigem olema (hetkel on alumine näide ilma).

Minifitseeritud Bootstrapi CSS failide maht pärast PurgeCSS-iga töötlust

Allpool on näha ülalpool kirjeldatud meetodite vahe. Esiteks, oluline, et PurgeCSS'iga töötlemine üldse vähendab oluliselt css faili mahtu ja teiseks, et PurgeCSS lihtsalt PostCSS'i pistikuna annab oluliselt väiksema mahuga tulemuse. Noh, juhul kui ma selle meetodiga midagi olulist minema ei visanud :)

Joonis 1. Töötlemata Bootstrap CSS

Joonis 2. Esimene Vite.js PurgeCss plugin – ca 5 korda väiksem algsest

Joonis 3. Teine Vite.js PurgeCSS plugin – ca 7 korda väiksem algsest

Joonis 4. PurgeCSS PostCSS pluginana – ca 22 korda väiksem algsest.

Kokkuvõtteks

Tailwind on äge. Jah, see siin ei ole näpukas.