Twitter Bootstrap Question posted in

gatsby HTML file size too large (i.e. due to bootstrap-CSS)-Twitter bootstrap

Problem

When I build my gatsby website with "gatsby build", the size of the generated HTML and CSS files is fairly large (approx. 200kB; even though there is close to zero real text-content in it).

When looking into the generated HTML-file, it turns out, that in each and every generated HTML-file, the complete global CSS is (in text-form) included. So it is completly redundant.

In my case: I use bootstrap as frontend framework, so all the bootstrap-css-classes (used and unused ones) are

  1. 100% included in the generated HTML-files
  2. AND additionally: in the seperate "styles.ac6d….css" file.

To clarify: What I get after the gatsby built:

index.html    210 kB
about.html    210 kB
imprint.html  210 kB
....
style.css     200 kB

Expected Behaviour

What I would have expected after the gatsby built:

index.html     10 kB
about.html     10 kB
imprint.html   10 kB
....
style.css     200 kB

I would like to have small HTML-files without any unused CSS in it OR at least not to have the CSS redundently in 20 different files.

Questions

  1. Is it possible to get gatsby built HTML-files without all CSS redundently included in every file?
  2. AND / OR: Is it possible to have only the needed CSS-classes in the file (especially in the case of bootstrap)?
  3. Am I doing something wrong here?

Additional Infos

How do I import the bootstrap CSS?

in global.scss:

@import "./node_modules/bootstrap/scss/bootstrap

in gatsby-browser.js

import "./src/styles/global.scss"

How does the compiled HTML look like?

The compiled HTML in index.html (and about.html, …) from gatsby looks like so:

<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><style data-href="/styles.ac6d966df9cf852917cd.css" id="gatsby-global-css">/*!
 * Bootstrap v4.6.0 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;
 
 <!-- .... [ALL THE REST OF BOOTSTRAP CSS] -->

Edit: Conclusion for me

To inject the full global CSS in all the HTML files seems to be a normal behavior from the gatsby build process according to the comments. So just in case anybody else wonders about this gatsby behaviour…

Tags:

2

Answers


  1. 0

    I would go the SCSS way by importing a global styles.scss in which you only import the needed parts of the bootstrap distribution.

    /*----------------------------------------------------
 Overriden Bootstrap Variables (by me!!!!!)
------------------------------------------------------*/
$primary: #00B056;
$secondary: #bf9571;

$body-bg: #fff;
$body-color: #5a5a5a;

/*----------------------------------------------------
 Import Bootstrap SCSS
------------------------------------------------------*/

// use this one only for debugging purposes. This is the whole package
//@import "../../../node_modules/bootstrap/scss/bootstrap";

// Required
@import "../../../node_modules/bootstrap/scss/functions";
@import "../../../node_modules/bootstrap/scss/variables";
@import "../../../node_modules/bootstrap/scss/mixins";

// Optional
@import "../../../node_modules/bootstrap/scss/reboot";
@import "../../../node_modules/bootstrap/scss/type";
@import "../../../node_modules/bootstrap/scss/images"; 

// add more bootstrap stuff as needed

    There are of course more partial scss bootstrap packages available. Check their documentation for scss handling or check your node_modules path.

    Of course you need to install bootstrap via npm/yarn to have it available. Also you need gatsby scss plugins like gatsby-plugin-sass and node-sass.

    Login or Signup to reply.
  2. 0

    Among not using Bootstrap as @George suggested in @Logemann‘s answer, which in my opinion should be always avoided because tend to overload the applications and the same effect can be easily applied using own custom CSS.

    I would suggest only importing the mandatory Bootstrap modules, rather than all the dependency to save some KB.

    In addition, if get rid of Bootstrap is not an option I will try to look at some purging plugin, such as gatsby-plugin-purcecss to remove some duplicated styles in specific files.

    // gatsy-config.js
module.exports = {
  plugins: [
    `gatsby-plugin-stylus`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-less`,
    `gatsby-plugin-postcss`,
    // Add after these plugins if used
    { 
      resolve: `gatsby-plugin-purgecss`,
      options: {
        printRejected: true, // Print removed selectors and processed file names
        // develop: true, // Enable while using `gatsby develop`
        // tailwind: true, // Enable tailwindcss support
        // whitelist: ['whitelist'], // Don't remove this selector
        // ignore: ['/ignored.css', 'prismjs/', 'docsearch.js/'], // Ignore files/folders
        // purgeOnly : ['components/', '/main.css', 'bootstrap/'], // Purge only these files/folders
      }
    }
  ]
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search