yenshih / style-resources-loader

CSS processor resources loader for webpack
MIT License
262 stars 10 forks source link

Failed to cache .less files on Win 10 with Webpack 4 #17

Closed Tao-Oak closed 4 years ago

Tao-Oak commented 4 years ago

We used SRL with Webpack 3, and it worked well both on Windows and Ubuntu. After we upgraded Webpack from 3 to 4, there is a significant improvement for incremental build speed on Ubuntu. But for windows, this is not the case. It took ~30s for every incremental build on windows. Through examining the Webpack log and some simple tests, we found that SRL caused .less files to rebuild on every incremental build. Here is the minimal reproducible repo with two branches, one use SRL, and one use @import to load the baseStyle.less file.

After some debugging, we found that SRL uses glob to match the patterns option and returns Unix style file path like D:/you/path/to/less/file.less. It then adds this Unix style file path to the dependency list of the current module. While the needRebuild method which controls the cache behavior of Webpack uses windows style file path on windows.

TheneedRebuild method has two parameters: fileTimestamps and contextTimestamps, which both are filePath -> timestamps Map. The keys of these two Maps are windows style file path like D:\\you\\path\\to\\less\\file.less, and the values are timestamps when the corresponding file was updated.

Due to the mismatch of these two file path styles, the needRebuild method returns false every time and thus .less files rebuild on every incremental build.

yenshih commented 4 years ago

Great analysis, will fix it soon. thanks!

yenshih commented 4 years ago

Hi! I have spent some time trying to figure out this problem. It seems webpack has updated a bunch of code in these few days.

Actually I don't have a Windows PC to reproduce. I was just wondering if you could point out how wepack

controls the cache behavior of Webpack uses windows style file path on windows

Probably related source code: https://github.com/webpack/loader-runner/blob/master/lib/LoaderRunner.js#L284 https://github.com/webpack/webpack/blob/master/lib/NormalModule.js#L467 https://github.com/webpack/webpack/blob/master/lib/FileSystemInfo.js#L708

Tao-Oak commented 4 years ago

For webpack 4, it use the needRebuild method to control the cache behavior, here is code location of webpack v4.41.2.

For webpack 5, needRebuild was deprecated but use needBuild insteand,here is the code.

For the case you don't have a Windows PC to reproduce this problem, I will create a PR to fix it latterly.