malash / postcss-preset-env-issue-232

postcss-preset-env performance issue

Steps

1. Clone the repo and run yarn
2. Run yarn start, you will see node inspect output like this:

Debugger listening on ws://127.0.0.1:9229/77d11bef-5731-4136-bf81-181e689ce2c8
For help, see: https://nodejs.org/en/docs/inspector

3. Open Chrome and visit chrome://inspect/#devices
4. Click inspect link

5. Click Start button in the Profiler tab

6. Then, wait about 30 seconds, when the Webpack finished building, click Stop button.

7. Change the dropdown to Heavy (Bottom Up) if needed, and click the Total Time to sort the results.

Temporary fix

Edit node_modules/postcss-preset-env/dist/index.js:L174 and change this function

function getUnsupportedBrowsersByFeature(feature) {
  // ...
}

to this:

function _getUnsupportedBrowsersByFeature(feature) {
  // ...
}
const getUnsupportedBrowsersByFeature = require("lodash/memoize")(
  _getUnsupportedBrowsersByFeature
);

Make sure you installed lodash first.

The the Webpack build time will reduce to about 10 seconds.