Purging Bootstrap

bootstrap code

1- Definition:

Purging CSS is a performance optimization technique used to remove unused CSS styles from a project, resulting in smaller file sizes and faster page load times. It is especially critical when using utility-first frameworks like Tailwind CSS, or large libraries like Bootstrap, where a massive stylesheet is generated, but only a small percentage of selectors are actually used in the HTML/JS.

2- Core Concepts of CSS Purging:

How it Works:

Tools analyze your content files (HTML, JavaScript, templates, React components) and compare them with the CSS files.

What it Does:

It removes any CSS rules that do not have a corresponding selector in the content files, leaving only the styles required for the project.

When to Use:

It is highly recommended for production builds to minimize load times.

3- Purging Bootstrap:

Purging Bootstrap removes unused CSS, reducing file sizes from ~150KB+ to as low as 15KB. This is achieved using PurgeCSS to scan HTML/JS files for active classes and remove the rest. It is highly recommended to use this tool to optimize production builds, especially for performance-sensitive sites.

Key Methods to Purge Bootstrap

PurgeCSS CLI:

Get Talhaoui mouad’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Direct installation via npm (npm i — save-dev purgecss) to parse CSS and HTML files, saving the result to a new file.

Gatsby Plugin:

Use gatsby-plugin-purgecss to remove unused CSS from production builds.

Webpack Plugin:

Integrate purgecss-webpack-plugin for automated purging during the build process.

Framework Specific:

Utilize plugins for frameworks like Nuxt (nuxt-purgecss) or Drupal to manage Bootstrap styles.

Essential Tips and Precautions

• Whitelist Classes: If JavaScript injects classes (like show in dropdowns) that are removed, add them to a whitelist to prevent functionality issues.
• Check Content Paths: Ensure PurgeCSS scans all files, including Javascript, that contain class names.
• Combine with Compression: While useful, Gzip compression can sometimes reduce file sizes enough that purging provides less benefit compared to CDN usage, but it is still good practice to reduce bloat.

Example PurgeCSS CLI Command:

# Navigate to project and run
purgecss --css bootstrap.min.css --content index.html js/*.js --output dist/