Minify Assets - Juliusmeeuwisse/blok-tech-crocmeisters GitHub Wiki

CSS-Nano

Voor mijn feature heb ik gekeken naar CSS-Nano, dit heb ik gedaan omdat optimizations mij altijd interesseren. Ik heb het gevoel dat veel developers te laat aan optimizations denken waardoor het uiteindelijke product niet te runnen is. Natuurlijk valt dit mee in css bestanden maar toch denk ik dat elke compressie helpt bij het behouden van snelheid in applicaties. CSS-Nano zorgt ervoor dat je CSS bestanden zo klein mogelijk blijven.

Configuration

Mijn postcss configuratie bestand ziet er zo uit, ik heb CSSNANO gebruikt voor minification en heb hierbij gebruik gemaakt van de default preset. Ik heb mij verdiept in de presets/optimizations en ben uiteindelijk toch voor de default gegaan omdat deze mij het veiligst leek en omdat deze al het bruikbare bevatte.

module.exports = {
  plugins: [
    require('cssnano')({
      preset: 'default'
    })
  ]
}

CSS-Size

Ik heb gebruik gemaakt van de NPM package css-size (https://www.npmjs.com/package/css-size). Met deze package kan ik onder andere tabellen etcetra laten zien in de command line interface. Deze tabel bevat de grootte van het css bestand voor en na compressie. Het gaat nu om de original vs processed grootte die staat in de eerste kolom (uncompressed). Ik heb uiteindelijk geen Gzip toegevoegd.

Scripts

Ik heb uiteindelijk drie scripts gemaakt om het voor mij makkelijker te maken. De eerste maakt als je npm run postcss doet de output stylesheet wat dus de gecomprimeerde versie is van style.css. De tweede runt bij npm run css-size-help de help command van csssize (deze had ik nodig omdat er iets niet werkte. De derde toont als je npm run csssize de tabel van de before en after optimizations zoals hierboven.

    "postcss": "npx postcss public/css/style.css > public/css/style_output.css",
    "css-size-help": "css-size --help",
    "csssize": "css-size public/css/style.css"

Bronnen