Test scripts to measure performance difference for Decidim CSS compilation

test-sass

#!/usr/bin/env node

const fs = require("fs");
// const sass = require("sass");
const sass = require("sass-embedded"); // npm i sass-embedded

const paths = [
  "../decidim-accountability/app/packs",
  "../decidim-admin/app/packs",
  "../decidim-api/app/packs",
  "../decidim-assemblies/app/packs",
  "../decidim-blogs/app/packs",
  "../decidim-budgets/app/packs",
  "../decidim-comments/app/packs",
  "../decidim-conferences/app/packs",
  "../decidim-consultations/app/packs",
  "../decidim-core/app/packs",
  "../decidim-debates/app/packs",
  "../decidim-dev/app/packs",
  "../decidim-elections/app/packs",
  "../decidim-forms/app/packs",
  "../decidim-generators/app/packs",
  "../decidim-initiatives/app/packs",
  "../decidim-meetings/app/packs",
  "../decidim-pages/app/packs",
  "../decidim-participatory_processes/app/packs",
  "../decidim-proposals/app/packs",
  "../decidim-sortitions/app/packs",
  "../decidim-surveys/app/packs",
  "../decidim-system/app/packs",
  "../decidim-templates/app/packs",
  "../decidim-verifications/app/packs",
  "node_modules"
];

const startTime = performance.now();

const result = sass.compile(
  "../decidim-core/app/packs/stylesheets/decidim/application.scss",
  {
    loadPaths: paths,
    importers: [{
      canonicalize(url, options) {
        if (!options.fromImport) {
          return null;
        }
        if (!url.startsWith("!decidim")) {
          return null;
        }
        return new URL(`decidim:${url}`);
      },
      load(canonicalUrl) {
        return {
          contents: "",
          syntax: "scss"
        };
      },
    }],
  },
);

fs.writeFile("build.css", result.css, (err) => {
  if (err) {
    console.error(err);
    return;
  }

  console.log("File written successfully");
  console.log(`Time elapsed: ${performance.now() - startTime}`);
  console.log(`Memory used: ${Math.round(process.memoryUsage().heapUsed / 1024 / 1024 * 100) / 100} MB`);
});

test-webpack

#!/usr/bin/env node

const path = require("path");
const webpack = require("webpack");

const paths = [
  "../../decidim-accountability/app/packs",
  "../../decidim-admin/app/packs",
  "../../decidim-api/app/packs",
  "../../decidim-assemblies/app/packs",
  "../../decidim-blogs/app/packs",
  "../../decidim-budgets/app/packs",
  "../../decidim-comments/app/packs",
  "../../decidim-conferences/app/packs",
  "../../decidim-consultations/app/packs",
  "../../decidim-core/app/packs",
  "../../decidim-debates/app/packs",
  "../../decidim-dev/app/packs",
  "../../decidim-elections/app/packs",
  "../../decidim-forms/app/packs",
  "../../decidim-generators/app/packs",
  "../../decidim-initiatives/app/packs",
  "../../decidim-meetings/app/packs",
  "../../decidim-pages/app/packs",
  "../../decidim-participatory_processes/app/packs",
  "../../decidim-proposals/app/packs",
  "../../decidim-sortitions/app/packs",
  "../../decidim-surveys/app/packs",
  "../../decidim-system/app/packs",
  "../../decidim-templates/app/packs",
  "../../decidim-verifications/app/packs",
  "../node_modules"
];

const startTime = performance.now();

webpack({
  entry: {
    main: path.resolve(__dirname, "../../decidim-core/app/packs/stylesheets/decidim/application.scss"),
  },
  resolve: {
    modules: paths.map((filePath) => path.resolve(__dirname, filePath)),
  },
  module: {
    rules: [
      {
        test: /\.scss$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              url: false,
            },
          },
          {
            loader: "sass-loader",
            options: {
              sassOptions: {
                importer: [
                  (url) => {
                    if (!url.startsWith("!decidim")) {
                      return null;
                    }

                    return { contents: "" };
                  }
                ]
              }
            }
          },
        ],
      },
    ],
  },
}, (err, stats) => { // [Stats Object](#stats-object)
  if (err || stats.hasErrors()) {
    console.log("Error occurred");
    console.error(err);
    console.log(stats.toString());
    return;
  }
  // Done processing
  console.log("File written successfully");
  console.log(`Time elapsed: ${performance.now() - startTime}`);
  console.log(`Memory used: ${Math.round(process.memoryUsage().heapUsed / 1024 / 1024 * 100) / 100} MB`);
});