Skip to content

[Bug]: Watch updates whole output files #8093

@Touhami-viseo

Description

@Touhami-viseo

System Info

System:
- OS: Windows 11 10.0.22631
- CPU: (12) x64 12th Gen Intel(R) Core(TM) i7-1265U
- Memory: 17.93 GB / 31.68 GB
Binaries:
- Node: 18.20.4 - ~\AppData\Local\fnm_multishells\15100_1728638896208\node.EXE
- npm: 10.7.0 - ~\AppData\Local\fnm_multishells\15100_1728638896208\npm.CMD
Browsers:
- Firefox: 131.0.2
npmPackages:
- @rspack/cli: ^1.0.8 => 1.0.8
- @rspack/core: ^1.0.8 => 1.0.8

Details

Situation:
We are using RSpack for SFRA (Salesforce commerce cloud Reference Architecture). It work very well and allows us to have amazing build and deploy times. SFRA has a particularity that custom developments and extensions by third party vendors are installed in so called cartridges. Cartridges are in fact directories that contain both server side Javascript as well as client side Javascript, SCSS and templates. We use Rspack to look inside all those directories, find SCSS and JS files and compile them. Since commerce cloud is a SaaS, we need to upload those files over to the cloud storage. During development, we use VSCodium with an extension called Prophet debugger that assists us to for file changes and autoupload them to the cloud.

Issue:
When using rspack watch, or even rspack build, the whole static files for each cartridge get updated somehow whenever we edit a file. This update triggers the uploader and it takes for ever to upload the hunders of files generated.

When we were using webpack before, the watch only uploaded the files that were affected and the upload felt instantaneous.

This attached video better demonstrates the video. The upload that usually would take a few milliseconds, now takes minutes.

watcher.mp4
rspack.config.js
// @ts-check

const path = require('path');
const helper = require('./build/webpackHelpers');
const rspack = require('@rspack/core');
const { defineConfig } = require('@rspack/cli');

const jsConfig = (env) => defineConfig({
    output: {
        path: 'redacted/path/to/static/dir'
    },
    performance: {
        hints: false
    },
    name: 'JS',
    devtool: env === 'production' ? false : 'cheap-module-source-map',
    entry: { ...helper.getJsEntries() },
    externals: {
        jquery: 'jQuery',
    },
    resolve: {
        alias: {
            ...helper.getPackageAliases('js'),
            'safe-buffer': path.resolve(__dirname, 'node_modules/safe-buffer'),
            'bn.js': path.resolve(__dirname, 'node_modules/bn.js')
        },
        fallback: {
            crypto: require.resolve('crypto-browserify'),
            stream: require.resolve('stream-browserify'),
            vm: require.resolve('vm-browserify'),
            buffer: require.resolve('buffer'),
        }
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/](bootstrap|lodash|slick-carousel|jquery.panzoom|pace-js|popper.js|gsap|slick)[\\/]/,
                    name: 'default/js/vendors',
                    chunks: 'all'
                }
            }
        },
        minimizer: [
            new rspack.SwcJsMinimizerRspackPlugin({
                extractComments: false,
                minimizerOptions: {
                    minify: true,
                    compress: true,
                    mangle: true,
                    module: true,
                }
            })
        ]
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'builtin:swc-loader',
                }
            }
        ]
    },
    plugins: [
        new rspack.CopyRspackPlugin({
            patterns: [/* redacted list of static files to copy */]
        })
    ]
});

const scssConfig = (env) => defineConfig({
    output: {
        path: 'redacted/path/to/static/dir/same/as/js'
    },
    performance: {
        hints: false
    },
    name: 'SCSS',
    devtool: false,
    entry: { ...helper.getScssEntries() },
    resolve: {
        alias: {
            ...helper.getPackageAliases('scss')
        }
    },
    optimization: {
        removeEmptyChunks: true,
        minimizer: [
            new rspack.LightningCssMinimizerRspackPlugin(),
        ]
    },
    plugins: [
        new rspack.CssExtractRspackPlugin(),
        new rspack.CopyRspackPlugin({
            patterns: [/* redacted list of font files to copy */]
        })
    ],
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    rspack.CssExtractRspackPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: { url: false }
                    },
                    {
                        loader: 'builtin:lightningcss-loader',
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            api: 'modern-compiler',
                            implementation: require("sass-embedded"),
                            sassOptions: {
                                quietDeps: true,
                                silenceDeprecations: ['mixed-decls', 'slash-div', 'color-functions'],
                                loadPaths: [path.resolve('node_modules/flag-icon-css/sass')],
                                includePaths: [path.resolve('node_modules/flag-icon-css/sass')]
                            }
                        }
                    }
                ]
            }
        ]
    }
});

module.exports = (env) => [
    jsConfig(env),
    scssConfig(env),
];

Reproduce link

No response

Reproduce Steps

Given configuration provided in details section:

  1. Have VSCodium or VSCode with 'Prophet debugger' installed
  2. Enable watch and upload file changes
  3. Run npm run watch.
  4. Save a Client JS or SCSS file
  5. Observe uploader file watcher reuploads whole hunders of files one by one which takes forever

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions