-
-
Notifications
You must be signed in to change notification settings - Fork 781
Description
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:
- Have VSCodium or VSCode with 'Prophet debugger' installed
- Enable watch and upload file changes
- Run
npm run watch. - Save a Client JS or SCSS file
- Observe uploader file watcher reuploads whole hunders of files one by one which takes forever