Exemplu de utilizare PurgeCSS pt Laravel si Wordpress

Limbaje de Programare JavaScript / Node
,
1

Am creat un thread nou saptamana asta cu ceva articole interesante citite de mine in ultima vreme, Articole citite in ultima vreme, si vreau sa adaug o completare articolului How I dropped 250KB of dead CSS weight with PurgeCSS.

De ceva vreme am inceput sa folosesc TailwindCSS atat in Laravel cat si in Wordpress. Daca ati mai incercat framework-uri de genul acesta probabil ati observat ca marimea fisierului CSS ramane destul de mare si dupa minificare, ceva in jurul 300-400kB.

Atat pentru Laravel cat si pentru Wordpress folosesc Laravel Mix, un wrapper pentru Webpack ( vine cu o instalare default in Laravel ). In situatia asta fisierul meu de configuratie arata cam asa:

let mix = require('laravel-mix');

require("laravel-mix-tailwind");
require("laravel-mix-purgecss");

mix.browserSync({
	host: 'localhost',
	port: 3000,
	proxy: '192.168.10.22'
});

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/css/main.scss', 'public/css')
   .options({
      processCssUrls: false,
   })
   .tailwind()
   .purgeCss();

if (mix.inProduction()) {
    mix.version();
}

Codul de mai sus e un setup default pt workflow-ul meu din ultima vreme in Laravel.

Pentru Wordpress acelasi fisier de configuratie arata putin diferit:

let mix = require("laravel-mix");
let tailwindcss = require("tailwindcss");

require('laravel-mix-purgecss');

const purgecssWordpress = {
    whitelistPatterns: [
        /^rtl(-.*)?$/,
        /^home(-.*)?$/,
        /^blog(-.*)?$/,
        /^archive(-.*)?$/,
        /^date(-.*)?$/,
        /^error404(-.*)?$/,
        /^logged-in(-.*)?$/,
        /^admin-bar(-.*)?$/,
        /^no-customize-support(-.*)?$/,
        /^wp-custom-logo(-.*)?$/,
	/^search(-.*)?$/,
	/^nav(-.*)?$/,
	/^wp(-.*)?$/,
	/^screen(-.*)?$/,
	/^navigation(-.*)?$/,
	/^(.*)-template(-.*)?$/,
	/^(.*)?-?single(-.*)?$/,
	/^postid-(.*)?$/,
	/^post-(.*)?$/,
	/^attachmentid-(.*)?$/,
	/^attachment(-.*)?$/,
	/^page(-.*)?$/,
	/^(post-type-)?archive(-.*)?$/,
	/^author(-.*)?$/,
	/^gallery(-.*)?$/,
	/^category(-.*)?$/,
	/^tag(-.*)?$/,
	/^card(-.*)?$/,
	/^menu(-.*)?$/,
	/^tags(-.*)?$/,
	/^tax-(.*)?$/,
	/^term-(.*)?$/,
	/^date-(.*)?$/,
	/^(.*)?-?paged(-.*)?$/,
	/^says(-.*)?$/,
	/^depth(-.*)?$/,
	/^comment(-.*)?$/,
	/^comments(-.*)?$/,
	/^children(-.*)?$/,
	/^custom(-.*)?$/,
	/^custom-background(-.*)?$/
    ]
};

mix
.browserSync({
		proxy: "custom.local",
		files: ["./**/*.css", "./**/*.js", "./**/*.php", "./*.php"]
	});

mix
	.js("assets/js/custom/custom.js", "assets/js")
	.postCss("assets/css/style.css", "./", [
		tailwindcss("./tailwind-config.js")
	])
	.options({
		publicPath: "./"
	})
    .purgeCss({
        globs: [
			path.join(__dirname, './../**/*.css'),
			path.join(__dirname, './../**/*.php'),
			path.join(__dirname, './../**/*.vue'),
			path.join(__dirname, './../src/**/*.js'),
        ],
        extensions: ['html', 'js', 'php', 'vue', 'css'],
        whitelistPatterns: purgecssWordpress.whitelistPatterns
    });

In varianta de sus, PurgeCSS scaneaza si curata fisierul final doar cand se ruleaza npm run production

Array-ul whitelistPatterns are majoritatea claselor default din Wordpress plus clasele/id-urile ce nu se regasesc in TailwindCSS.

La ultimele proiecte in Wordpress la care am lucrat, fisierul CSS final avea in jur de 50 kB dupa purge si minificare.

5 Likes