Skip to content

Component css gets reloaded with css-loader on any file change #131

Closed
@non25

Description

@non25

Hi dear devs and contributors.

I've noticed this behavior trying to reduce watch mode reload times when using tailwind+postcss through svelte-preprocess by monitoring with speed monitoring webpack plugin.

On any non-component change in the project with 20 components that uses in-component css there's 40 seconds of wait due to reloading of all Component.svelte.css in _virtualFiles.

I've been messing around with virtual.js for some hours trying to fix this.

Tried to pass fs.statSync(this.resourcePath)'s to use with virtual css file. Though that non-authentic VirtualFileStats triggered watcher to reload. Didn't work.

console.logged contents of _statStorage, _readFileStorage, _virtualFiles in compiler.inputFileSystem.purge and compiler.inputFileSystem._writeVirtualFile.
It appears that original purge doesn't clear any of that containers, commenting it's code doesn't change anything.
compiler.inputFileSystem.purge does trigger on any change.

var originalPurge = compiler.inputFileSystem.purge;
compiler.inputFileSystem.purge = function() {
if (originalPurge) {
originalPurge.call(this, arguments);
}
if (this._virtualFiles) {
Object.keys(this._virtualFiles).forEach(
function(file) {
var data = this._virtualFiles[file];
setData(this._statStorage, file, [null, data.stats]);
setData(this._readFileStorage, file, [null, data.contents]);
}.bind(this)
);
}
};

While we at it, what is the purpose of this?

const watchRunHook = (watcher, callback) => {
this._watcher = watcher.compiler || watcher;
callback();
};
if (compiler.hooks) {
compiler.hooks.watchRun.tapAsync('VirtualModulesPlugin', watchRunHook);
} else {
compiler.plugin('watch-run', watchRunHook);
}

Also there's an issue with similar task and problem, where author solved it by decorating NodeWatchFileSystem.
webpack/webpack#5824
Don't know if that is a good idea...

The main question is why watcher reloads virtual css files when they weren't changed...
Would like to get some insight into this.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions