eslint-webpack-plugin is 2.5 times slower than eslint-loader

[hecontreraso]

When I run webpack it takes waaay more time than eslint-loaded. Is this normal?
I just followed the "Migrate from eslint-loader" instructions from the docs

• Operating System: mac
• Node Version: 10.18.0
• NPM Version: 6.13.4
• webpack Version: 4.29.6
• eslint-webpack-plugin Version: 2.1.0

Expected Behavior

Webpack compilation time is the same as before

Actual Behavior

Webpack compilation time is the 2.5 times higher

Code

// webpack.config.js
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  // ...
  plugins: [new ESLintPlugin(options)],
  // ...
};

[alexander-akait]

Howe can reproduce or investigate this? Please provide more infromation

[jesec]

I can confirm this. It seems that eslint-webpack-plugin blocks the compilation to do jobs while eslint-loader doesn't. Incremental compilation is hit even harder. In my project, with one file/line changed, it is almost instant with eslint-loader but with eslint-webpack-plugin it takes approx. 15 seconds.

No special step is needed to reproduce. If you want, you can build my project.

eslint-loader configuration:

const eslintFormatter = require('react-dev-utils/eslintFormatter');

{
  enforce: 'pre',
  test: /\.(ts|js)x?$/,
  exclude: /node_modules/,
  use: [
    {
      loader: 'eslint-loader',
      options: {
        formatter: eslintFormatter,
        emitWarning: true,
      },
    },
  ],
},

eslint-webpack-plugin configuration:

new ESLintPlugin({
  extensions: ['js', 'jsx', 'ts', 'tsx'],
  emitWarning: true,
}),

[brionmario]

Faced the exact same issue while migrating. In our case, the recompile times increased by more than 10x.
Tried using lintDirtyModulesOnly flag, but that resulted in errors not being caught.

[alexander-akait]

/cc @ricardogobbosouza

[vegerot]

As someone looking to switch from eslint-loader to eslint-webpack-plugin, this thread is concerning, given the already unbearable (#33 (comment)) slowness of the former in my current codebase

[ricardogobbosouza]

Hi @hecontreraso
Try v2.2.0

[decademoon]

Upgrading 2.1.0 -> 2.2.0 broke for me. When building I get an error about a missing module:

node:internal/modules/cjs/loader:900
  const err = new Error(message);
              ^

Error: Failed to load plugin 'es5' declared in 'node_modules/focus-visible/.eslintrc.js': Cannot find module 'eslint-plugin-es5'
Require stack:
- /Users/dean/Sites/foo/packages/app/node_modules/focus-visible/__placeholder__.js
Referenced from: /Users/dean/Sites/foo/packages/app/node_modules/focus-visible/.eslintrc.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:900:15)
    at Function.resolve (node:internal/modules/cjs/helpers:94:19)
    at Object.resolve (/Users/dean/Sites/foo/packages/app/node_modules/@eslint/eslintrc/lib/shared/relative-module-resolver.js:28:50)
    at ConfigArrayFactory._loadPlugin (/Users/dean/Sites/foo/packages/app/node_modules/@eslint/eslintrc/lib/config-array-factory.js:1011:39)
    at ConfigArrayFactory._loadExtendedPluginConfig (/Users/dean/Sites/foo/packages/app/node_modules/@eslint/eslintrc/lib/config-array-factory.js:831:29)
    at ConfigArrayFactory._loadExtends (/Users/dean/Sites/foo/packages/app/node_modules/@eslint/eslintrc/lib/config-array-factory.js:778:29)
    at ConfigArrayFactory._normalizeObjectConfigDataBody (/Users/dean/Sites/foo/packages/app/node_modules/@eslint/eslintrc/lib/config-array-factory.js:719:25)
    at _normalizeObjectConfigDataBody.next (<anonymous>)
    at ConfigArrayFactory._normalizeObjectConfigData (/Users/dean/Sites/foo/packages/app/node_modules/@eslint/eslintrc/lib/config-array-factory.js:664:20)
    at _normalizeObjectConfigData.next (<anonymous>) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/dean/Sites/foo/packages/app/node_modules/focus-visible/__placeholder__.js'
  ],
  messageTemplate: 'plugin-missing',
  messageData: {
    pluginName: 'eslint-plugin-es5',
    resolvePluginsRelativeTo: '/Users/dean/Sites/foo/packages/app/node_modules/focus-visible',
    importerName: 'node_modules/focus-visible/.eslintrc.js'
  }
}

Not sure why it's now trying to lint node_modules files?

Running yarn eslint . in my project directory works though. I'm just using basic new ESLintPlugin() in my webpack config.

[AuthorProxy]

ultra slow, both new webpack-dev-server and eslint-plugin

[alcaitiff]

Upgrading to 2.2.1 appears to solve the problem.

Using 2.1.0

 DONE  Compiled successfully in 19460ms

Using 2.2.1

 DONE  Compiled successfully in 1024ms     

[ricardogobbosouza]

Hi @decademoon
Resolved on v2.3.0

[OlehRb]

Hi @ricardogobbosouza, it looks like this issue is still relevant
Our teams have been working on three apps, based on create-react-app4, which ships with eslint-webpack-plugin

Event though, those apps are relatively small, the initial build takes about 1 - 1.5 minutes and rebuild after each change takes approximately from 30sec to > than 1 minute

However, if we disable eslint-webpack-plugin from cra4 config and set up eslint-loader, the initial build is reduced to 35 ~ 40 sec and rebuild after each change takes approximately 3-10 secs

We used:
eslint-webpack-plugin@^2.4.1
eslint-loader@^4.0.2

All of us use MacBooks Pro 15 2017-2019

Our config .eslintrc
(.txt extension is used to upload it via github)

It seems, like with current performance of eslint-webpack-plugin it is impossible for us to use it.

Might a problem be in our .eslintrc?
Or is there any plans to improve the performance of eslint-webpack-plugin?

If you need any additional info, please, let me know.

[jgomezhidalgo]

Any updates on this issue @ricardogobbosouza?
It is still reproducible to me using eslint-webpack-plugin@2.5.0.

[ricardogobbosouza]

Hi @jgomezhidalgo, @OlehRb
Try version 2.5.1

[OlehRb]

Hi @ricardogobbosouza

I've ran a few tests for a small-to-middle size project, which my team is currently working on:

eslint-loader
Build: ~01:00
Rebuild: ~00:03

eslint-webpack-plugin^2.4.0 (my previous tests used this version as well)
Cold build (e.g. without .eslintcache): ~01:40
Build: ~01:40
Rebuild: ~00:12

eslint-webpack-plugin^2.5.1
Cold build (e.g. without .eslintcache): ~01:00
Build: ~00:30
Rebuild: ~00:03

My machine: MacBooks Pro 15 2018 macOS Big Sur 11.2.1

At the first glance it looks like the performance of 2.5.1 drastically improved, when compared to 2.4.0
After the .eslintcache file was generated it becomes twice faster than eslint-loader

I guess we will try to switch back to eslint-webpack-plugin for a while to see if it is going to improve our development experience

Nevertheless, awesome work @ricardogobbosouza, thank you very much
I will get back to you in case if we face with any issues after switching to 2.5.1