Consider alternative to postcss-normalize? It's really expensive (slow) to run (contains cpu profile dump)

Created by: cheapsteak

My yarn start was taking an excruciating amount of time to start up (36 seconds)

I ran a profiler and was surprised to see that the part that was taking the longest was postcss

Here's the CPU profile dump CPU-20190828T230439.cpuprofile.zip

~11s of that was /node_modules/postcss-browser-comments/index.cjs.js

It looks like postcss-browser-comments is a dependency of postcss-normalize (added in https://github.com/facebook/create-react-app/pull/5810).

I used react app rewired to remove postcssNormalize(), from the list of plugins provided to postcss and reduced startup time to 26s.

That's one expensive css reset

The contents of my mod if anyone needs to do this in the meantime (using react-app-rewired)

  const oneOfRules = config.module.rules.find(x => x.oneOf).oneOf;
  const postcssLoaders = oneOfRules
    .map(
      rule =>
        rule.use &&
        rule.use.find(x => x.loader && x.loader.includes('postcss-loader')),
    )
    .filter(x => x !== undefined);
  postcssLoaders.forEach(postcssLoader => {
    // copied from https://github.com/facebook/create-react-app/blob/cbaed7f9fff2fc570f4f206aa057253bd4f74c9e/packages/react-scripts/config/webpack.config.js#L110-L116
    postcssLoader.options.plugins = () => [
      require('postcss-flexbugs-fixes'),
      require('postcss-preset-env')({
        autoprefixer: {
          flexbox: 'no-2009',
        },
        stage: 3,
      }),
    ];
  });

I've also tried this:

  postcssLoaders.forEach(postcssLoader => {
    const originalPlugins = postcssLoader.options.plugins;
    postcssLoader.options.plugins = () =>
      originalPlugins().filter(x => x.postcssPlugin !== 'postcss-normalize');
  });

but this was equally slow (back to 36s)