Slow incremental webpack build times

I understand that this might not be the right place to report this issue, but I thought I’d post it here first to see if anyone else has more context.

We have a fairly large React app where we use webpack to compile our application.js bundle. Stylesheets are resolved using sass-loader, and components import their own stylesheets, like this:

const styles = require('./index.scss');

const Component = React.createClass({
  render() {
    return <div className={styles.
  }
});

To share configuration between the components and sass files (we use scss), we have a shared_config.json file with some key-value settings. In the past, we’ve used a manual script to generate a shared_config.scss file that we then use in our scss files. Yesterday, (thanks to https://github.com/Updater/node-sass-json-importer/pull/13) we switched to directly importing the json file, through the help of node-sass-json-import. That worked out well, the only problem is that our incremental build times for our webpack bundle went up from ~2.5 seconds to ~12 seconds. An incremental build happens any time a .scss or .js* file is saved. I’ve spent some time to bisect our git history to make sure that it was in fact adding this to our webpack.config.js that introduced the performance regression:

  sassLoader: {
    importer: require('node-sass-json-importer'),
    includePaths: [
      path.resolve('./app/assets/stylesheets'),
    ],
  }

Any ideas what could be the problem? I’m suspecting that node-sass/libsass isn’t being smart enough with custom importers (after all, node-sass warns about this being an experimental feature).

[JaZo]

I’ve done some profiling as @pmowrer suggested and put some logs at the beginning and end of the importer. The timing difference is only ~5ms! These results do not seem to indicate that the speed decrease is caused by node-sass-json-importer itself, but rather by something deeper in the stack. I’ll try to see if I can dig a little deeper.

N.B. My json is very simple: {"screen-xs": "480px", "screen-sm": "768px", "screen-m": "900px", "screen-l": "1100px", "screen-xl": "1300px", "screen-xxl": "1600px", "screen-mega": "1900px"}

[donnysim]

I just removed this package, because it forces recompilation of the styles every time something changes, even though it does not touch styles themselves. So an incremental compilation slows down from ~800ms to 3-5s.