Rspack is too slow

First some context:

I'm working on a large Django project, where jQuery, Javascript, React and SCSS is used.

I first used Webpack but each build took about 3 to 5 minutes, and working in dev mode with it isn't really possible due to my previous configuration.

I moved to Rspack to save some time but my build still takes minutes. (Vite isn't an option due to some issues with jQuery)

I believe that the issue has to due with my configuration but I'm not sure or is it normal for build times to take this long?

Configuration

rspack.config.js

const path = require("path");
const { rspack } = require("@rspack/core");
const BundleTracker = require("webpack-bundle-tracker");

const __destinationdirname = "../static/bundles/";

module.exports = {
    entry: {
        main: "./style/main.js",
        pdf_style: "./style/pdf/pdf_style.js",
        static_pdf_style: "./style/pdf/pdf_style.js",

        // These are all the available vendors in the vendors folder. Load what you use only to generate a lightweight file!
        // IMPORTANT: This entry point name 'vendors' must NOT conflict with any cache group name in splitChunks
        vendors: [
            "./vendors/js/jquery.min.js",
            //'./vendors/js/fresco.js',
            './vendors/js/remodal.js',
            //'./vendors/js/slick.min.js',
            './vendors/js/select2.min.js',
            //'./vendors/css/fresco.css',
            './vendors/css/remodal/remodal.css',
            './vendors/css/remodal/remodal-default-theme.css',
            //'./vendors/css/slick.css',
            './vendors/css/select2.min.css',
            //'./vendors/js/lazy-loading.js',
            //'./vendors/css/lazy-loading.css',
            //'./vendors/css/croppie.css',
            //'./vendors/js/croppie.min.js',
            './vendors/js/flatpickr/flatpickr.js',
            './vendors/js/flatpickr/flatpickr-fr.js',
            './vendors/css/flatpickr.css',
            './vendors/js/flatpickr/flatpickr-monthselect.js', // Uncomment lines starting at 118 too
            './vendors/css/flatpickr-monthselect.css',
        ],
        main_script: "./js/main_script.js",
        // gallery_script: './js/gallery_script.js',
        flatpickr_script: "./js/flatpickr_script.js",
        departing_component: "./ts/pages/departing_flights.tsx",
        carousel_component: "./ts/components/Carousel.tsx",
        flight_search_component: "./ts/components/search/FlightsSearchForm.tsx",
    },

    ignoreWarnings: [
            // Ignore react-datepicker critical dependency warning
            {
                module: /react-datepicker/,
                message: /Critical dependency: the request of a dependency is an expression/,
            },
            // Ignore Sass deprecation warnings
            {
                module: /sass-loader/,
                message: /Global built-in functions are deprecated/,
            },
            {
                module: /sass-loader/,
                message: /repetitive deprecation warnings omitted/,
            },
        ],

    output: {
        path: path.resolve(__destinationdirname),
        filename: (pathData) => {
            return pathData.chunk.name === "static_pdf_style"
                ? "[name].js"
                : "[name]-[contenthash].js";
        },
        clean: true,
    },

    externals: {
        jquery: "jQuery",
    },

    mode: "development",

    module: {
        rules: [
            {
                test: /\.[jt]sx?$/,
                exclude: /(node_modules)/,
                use: {
                    loader: "babel-loader", // keep babel first for zero-risk migration
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
                    },
                },
            },
            {
                // Apply rule for .sass, .scss or .css files
                test: /\.(sa|sc|c)ss$/,
                type: "javascript/auto",
                // Set loaders to transform files.
                // Loaders are applying from right to left(!)
                // The first loader will be applied after others
                use: [
                    // After all CSS loaders we use plugin to do his work.
                    // It gets all transformed CSS and extracts it into separate
                    // single bundled file
                    rspack.CssExtractRspackPlugin.loader,
                    // This loader resolves url() and @imports inside CSS
                    "css-loader",
                    // Then we apply postCSS fixes like autoprefixer and minifying
                    "postcss-loader",
                    {
                        // First we transform SASS to standard CSS
                        loader: "sass-loader",
                        options: {
                            implementation: require("sass"),
                        },
                    },
                ],
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/,
                type: "asset/resource",
                exclude: /node_modules/,
            },
            {
                test: /jquery.+\.js$/,
                use: [
                    {
                        loader: "expose-loader",
                        options: {
                            exposes: ["$", "jQuery"],
                        },
                    },
                ],
            },
            /*{
                test: /flatpickr-monthselect\.js$/,
                use: [{
                    loader: 'expose-loader',
                    options: {
                      exposes: ['monthSelectPlugin'],
                    },
                }]
            },*/
        ],
    },

    resolve: {
        extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],
    },

    plugins: [
        new rspack.CssExtractRspackPlugin({
            filename: (pathData) => {
                return pathData.chunk.name === "static_pdf_style"
                    ? "[name].css"
                    : "[name]-[contenthash].css";
            },
        }),
        new BundleTracker({
            path: __dirname,
            filename: "webpack-stats.json", // don't change the name or we'll have to change everything else
        }),
    ],

    optimization: {
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                // CRITICAL: Disable default 'vendors' cache group to avoid conflict with entry point 'vendors'
                default: false,
                vendors: false,
                // Use 'node_modules' name instead of 'vendors' for automatic node_modules splitting
                node_modules: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'node_modules',
                    chunks: 'all',
                    priority: 10,
                    enforce: true,
                },
                // Common chunks for shared code
                common: {
                    name: 'common',
                    minChunks: 2,
                    chunks: 'all',
                    priority: 5,
                },
            },
        },
        moduleIds: 'deterministic',
        chunkIds: 'deterministic',
    }
};

rspack.local.config

const { rspack } = require("@rspack/core");
const config = require("./rspack.config.js");

config.mode = "development";
config.devtool = "eval-cheap-module-source-map";

config.devServer = {
    allowedHosts: "all",
    host: "0.0.0.0",
    port: 8080,
    headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
        "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization",
    },
    hot: true,
    liveReload: true,
    watchFiles: [
        "js/**/*.scss",
        "js/**/*.js",
        "style/**/*.scss",
        "style/**/*.js",
        "vendors/**/*.scss",
        "vendors/**/*.js",
    ],
};

config.output.publicPath = "http://localhost:8080/static/bundles/";
config.plugins.push(
    new rspack.DefinePlugin({
        "process.env.NODE_ENV": JSON.stringify("development"),
    })
);

config.cache = {
    type: "filesystem",
};

module.exports = config;

And my build command is:

cross-env NODE_ENV=production rspack build --config rspack.prod.config.js

Вернуться на верх