less-loader version 6 introduces performance issues (slow re-builds)

[kaiyoma]

• Operating System: Windows 10
• Node Version: 12.16.1
• NPM Version: 6.13.4
• webpack Version: 4.43.0
• less-loader Version: 6.1.0

Expected Behavior

Performance should be about the same as version 5.

Actual Behavior

Here are the webpack build times I see with less-loader 5.0.0:

• Initial build: 79 seconds
• First re-build: 22 seconds
• Second re-build: 3 seconds
• Third re-build: 3 seconds

After upgrading to less-loader 6.1.0 (the only change I'm making), these are the new build times:

• Initial build: 99 seconds
• First re-build: 50 seconds
• Second re-build: 27 seconds
• Third re-build: 26 seconds

The results are 100% reproducible. Subsequent re-builds with less-loader version 6 are 10x slower than with less-loader version 5. Something big broke here.

[alexander-akait]

Because less-loader@5 has broken resolving algorithm and doesn't work in many cases, resolving cost of time + other problem with perf on less side #352 (comment).

Also:

• You ignore reproducible test repo/steps to reproduce
• You gave bare numbers with which I can’t work
• I don't know your configuration/options, some of option can reduce perf
• I don't know your less version

Please respect time of developers and do not ignore fields in the issue template. If you fix it I will reopen the issue and investigate it.

[kaiyoma]

The repro steps are: run less-loader version 5, get build numbers, upgrade to version 6, get build numbers.

If you want to know the less version, you should ask for it in the template. We're using version 3.11.1.

Here's the redacted version of our webpack config:

{
  "plugins": [
    {
      "definitions": {
        "process.browser": "true",
        "process.env": {},
        "process.env.MODULE_DIRECTORY": "\"...\\\\src\\\\modules\"",
        "process.env.SUPPORTED_BROWSERS": "[{\"browser\":\"Chrome\",\"version\":\"81\"},{\"browser\":\"Chrome\",\"versio
n\":\"80\"},{\"browser\":\"Chrome\",\"version\":\"79\"},{\"browser\":\"Chrome\",\"version\":\"78\"},{\"browser\":\"Chrom
e\",\"version\":\"77\"},{\"browser\":\"Chrome\",\"version\":\"76\"},{\"browser\":\"Chrome\",\"version\":\"75\"},{\"brows
er\":\"Chrome\",\"version\":\"74\"},{\"browser\":\"Chrome\",\"version\":\"73\"},{\"browser\":\"Chrome\",\"version\":\"72
\"},{\"browser\":\"Edge\",\"version\":\"81\"},{\"browser\":\"Firefox\",\"version\":\"75\"},{\"browser\":\"Firefox\",\"ve
rsion\":\"74\"},{\"browser\":\"Firefox\",\"version\":\"73\"},{\"browser\":\"Firefox\",\"version\":\"72\"},{\"browser\":\
"Firefox\",\"version\":\"71\"},{\"browser\":\"Firefox\",\"version\":\"70\"},{\"browser\":\"Firefox\",\"version\":\"69\"}
,{\"browser\":\"Firefox\",\"version\":\"68\"},{\"browser\":\"Firefox\",\"version\":\"67\"},{\"browser\":\"Firefox\",\"ve
rsion\":\"66\"},{\"browser\":\"Firefox\",\"version\":\"65\"},{\"browser\":\"Safari\",\"version\":\"13.1\"}]",
        "process.env.VERSION_NUM_ENV": "\"7.0.0\"",
        "process.release": {},
      }
    },
    {
      "profile": false,
      "modulesCount": 500,
      "showEntries": false,
      "showModules": true,
      "showActiveModules": true,
      "reporters": [
        {}
      ]
    },
    {
      "options": {},
      "fullBuildTimeout": 200,
      "requestTimeout": 10000
    }
  ],
  "module": {
    "rules": [
      {
        "test": {},
        "use": [
          "worker-loader",
          "babel-loader"
        ]
      },
      {
        "test": {},
        "include": [
          "...\\index.js",
          "...\\src",
          "...\\node_modules\\ip-regex",
          "...\\node_modules\\file-type"
        ],
        "use": {
          "loader": "babel-loader",
          "options": {
            "cacheDirectory": "./.cache/babel-loader"
          }
        }
      },
      {
        "test": {},
        "loader": "file-loader",
        "options": {
          "name": "fonts/[name].[ext]"
        }
      },
      {
        "test": {},
        "loader": "file-loader",
        "options": {
          "name": "images/[name].[ext]"
        }
      },
      {
        "test": {},
        "use": [
          {
            "loader": "file-loader",
            "options": {
              "name": "images/[name].[ext]"
            }
          },
          {
            "loader": "svgo-loader",
            "options": {
              "precision": 3
            }
          }
        ]
      },
      {
        "test": {},
        "loader": "url-loader"
      },
      {
        "test": {},
        "use": [
          "style-loader",
          "css-loader",
          {
            "loader": "postcss-loader",
            "options": {
              "plugins": [
                null
              ]
            }
          },
          {
            "loader": "less-loader",
            "options": {
              "javascriptEnabled": true
            }
          },
          {
            "loader": "...\\webpack\\color-sharing-loader.ts"
          }
        ]
      }
    ]
  },
  "node": {
    "Buffer": true,
    "__dirname": "mock",
    "__filename": "mock",
    "console": false,
    "fs": "empty",
    "global": true,
    "process": false,
    "setImmediate": false
  },
  "optimization": {
    "noEmitOnErrors": true
  },
  "resolve": {
    "extensions": [
      ".ts",
      ".tsx",
      ".js",
      ".json"
    ]
  },
  "target": "web",
  "devtool": "cheap-module-eval-source-map",
  "entry": {
    "project": [
      "webpack-dev-server/client?http://localhost:3001",
      "webpack/hot/only-dev-server",
      "./index"
    ]
  },
  "mode": "development",
  "output": {
    "globalObject": "(self || this)",
    "path": "...\\dist\\cv",
    "publicPath": "/cv/",
    "filename": "bundle.js"
  }
}

[alexander-akait]

Please create reproducible test repo, do not ignore request for reproducible steps in the issue template

[kaiyoma]

I don't think that's going to be possible here. The issue in question and these build times are based on a fairly complex webpack arrangement and a rather large repo of proprietary code (3,100+ JavaScript/TypeScript files and nearly 500 LESS files). I can't make any of that public.

If you need further information about the setup or want me to try out anything, I'm more than happy to help in that regard. I can run custom binaries or get more data locally and report back.

[alexander-akait]

@kaiyoma Maybe you can profile less-loader or do console.time/console.endTime using this.resourcePath?

[kaiyoma]

Sure, I'll try that and see if I can track down what's causing the big difference between v5 and v6.

[kaiyoma]

@evilebottnawi Where exactly should I try inserting console statements to get performance times? I tried using webpack's profiler plugin but it crashes every time (webpack/webpack#9114).

[alexander-akait]

😞 Maybe you can profile one standard build, not watch?

[kaiyoma]

Unfortunately, the issue I'm seeing is with rebuilds, so I need the watch functionality.

[alexander-akait]

You can use console.time(this.resourcePath) and console.timeEnd(this.resourcePath) to calculate time of execution

[alexander-akait]

Looks like it is your problem #357, only windows affected + it is only for watch, less-loader is not slow, it is the problem with recompilation less on each editing non less files

[kaiyoma]

Ahhh, that would explain it. Thanks for letting me know and thanks for the quick fix.

[alexander-akait]

@kaiyoma 👍

[kaiyoma]

I just tested with version 6.1.1 and everything looks good! The build and re-build times are about the same as version 5.