fix(css): minified html and include css on load (#2739)

gatsby-browser.tsx

@@ -3,6 +3,8 @@ import ReactIntlProvider from './src/containers/ReactIntl';
 import { defaultLanguage, defaultMessages } from './locales';
 import type { WrapPageElementBrowser } from './src/types';
 
+import './src/styles/index.scss';
+
 // eslint-disable-next-line import/prefer-default-export
 export const wrapPageElement: WrapPageElementBrowser = ({ element, props }) => {
   const { locale = defaultLanguage, intlMessages = defaultMessages } =

gatsby-config.js

@@ -8,7 +8,6 @@ const { localesAsString, defaultLanguage } = require('./locales');
 const gatsbyConfig = {
   flags: {
     FAST_DEV: true,
-    DETECT_NODE_MUTATIONS: true,
     PARALLEL_SOURCING: true,
   },
   pathPrefix: process.env.PATH_PREFIX,
@@ -229,6 +228,7 @@ const gatsbyConfig = {
     },
     'gatsby-plugin-sitemap',
     'gatsby-plugin-meta-redirect',
+    'gatsby-plugin-minify-html',
   ],
 };
 

package.json

@@ -36,6 +36,7 @@
     "gatsby-plugin-manifest": "^4.20.0",
     "gatsby-plugin-mdx": "^3.20.0",
     "gatsby-plugin-meta-redirect": "^1.1.1",
+    "gatsby-plugin-minify-html": "^1.0.4",
     "gatsby-plugin-offline-next": "^5.2.3",
     "gatsby-plugin-sass": "^5.20.0",
     "gatsby-plugin-sharp": "^4.20.0",

src/components/Layout/index.tsx

@@ -8,8 +8,6 @@ import Header from '../Header';
 import Footer from '../Footer';
 import SEO from '../Seo';
 
-import '../../styles/index.scss';
-
 interface Props {
   children: React.ReactNode;
   title?: string;