Sass components that reference other node packages are slow to compile

[bpina]

• Operating System: MacOS 10.14
• Node Version: 10.15.0
• NPM Version: 6.4.1
• webpack Version: 4.21.0
• sass-loader Version: 7.0.1

Expected Behavior / Situation

Stop searching for import files early if the import path contains a directory that doesn't exist.

Actual Behavior / Situation

Checking files to import using webpackLoader is slow when sass files reference files in other node packages. It appears that webpack is using a wide recursive search (trace) back up the file tree. This is especially painful when the file/directory doesn't exist.

Modification Proposal

When determining imports to resolve, first check if the path to includes a directory (and if that directory exists). This allows for a quicker hand off to node-sass to resolve the import.

I have a small change in place here as an experiment, which speeds up compilation for the sass packages I am using: (lines 49-53)

https://gist.github.com/bpina/a7e29cf7845799d2dd06eb19e72f1a8a

Would this be a worthwhile PR? I am not sure if the changes serve a general use case.

[alexander-akait]

Please provide minimum reproducible test repo

[bpina]

See: https://github.com/bpina/sass-loader-test

Before the changes to webpackImporter are applied:

 |2.5.1| Helionix in ~/workspace/sass-loader-test
± ad+bp |master S:4 ?:1 ✗| → yarn webpack
yarn run v1.13.0
warning package.json: No license field
$ /Users/pair/workspace/sass-loader-test/node_modules/.bin/webpack
Hash: 2397173e23de57ecb5e5
Version: webpack 4.30.0
Time: 3021ms
Built at: 04/23/2019 1:48:25 PM
    Asset     Size  Chunks             Chunk Names
styles.js  187 KiB  styles  [emitted]  styles
Entrypoint styles = styles.js
[./src/styles.scss] 175 KiB {styles} [built]
    + 1 hidden module
✨  Done in 3.62s.

After the changes to webpackImporter are applied:

  |2.5.1| Helionix in ~/workspace/sass-loader-test
± ad+bp |master S:4 ?:1 ✗| → yarn webpack
yarn run v1.13.0
warning package.json: No license field
$ /Users/pair/workspace/sass-loader-test/node_modules/.bin/webpack
Hash: 2397173e23de57ecb5e5
Version: webpack 4.30.0
Time: 1545ms
Built at: 04/23/2019 1:48:45 PM
    Asset     Size  Chunks             Chunk Names
styles.js  187 KiB  styles  [emitted]  styles
Entrypoint styles = styles.js
[./src/styles.scss] 175 KiB {styles} [built]
    + 1 hidden module
✨  Done in 2.15s.

This is more obvious in larger projects, where I reduced total webpack (js+sass) compile times from ~30seconds to ~10seconds.

[bpina]

I've opened a pull request for this here: #679

[alexander-akait]

Solved in master, now you can disable webpackImporter using webpackImporter: false and implement own importer