question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

image

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)

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
cheapsteakcommented, Nov 16, 2019

@ianschmitz confirmed to no longer be an issue in 3.3.0-next.62 using postcss-normalize 8.0.1! Thank you for looking in 🙏

0reactions
ianschmitzcommented, Nov 16, 2019

Can you confirm if this is still an issue @cheapsteak? I see https://github.com/csstools/postcss-normalize/issues/42 which references version 7.0.1 which was also the version we were using at the time you originally posted this issue.

Read more comments on GitHub >

github_iconTop Results From Across the Web

What is PostCSS? How to Use Plugins to Automate CSS Tasks
PostCSS is a Node.js tool that transforms your styles using JavaScript plugins. It generates more downloads per week on NPM than other CSS ......
Read more >
Website performance: How I've improved the performance of ...
In the previous post, I wrote about why performance is important and how to measure it for your website. In this post, I'll...
Read more >
Change log for 4.8.42
Bug 2069166: stop considering Mint mode as supported on Azure (#5699) #5753 ... Bug 1956978: install-gather: use names in pod logs too #4902 ......
Read more >
TensorFlow Ranking - A Library for Learning-to-Rank Techniques
2. Install Tensorboard and invoke it with the following commands. (tfr) $ pip install tensorboard (tfr) $ tensorboard --logdir $OUTPUT_DIR. Jupyter Notebook. An ......
Read more >
Nixpkgs 22.11 manual - NixOS
You can define a function called packageOverrides in your local ~/.config/nixpkgs/config.nix to override Nix packages. It must be a function that takes pkgs...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found