tslint-loader icon indicating copy to clipboard operation
tslint-loader copied to clipboard

typeCheck is too slow

Open jbedard opened this issue 7 years ago • 38 comments

The typeCheck option makes builds extremely slow because the Program is recreated for each file.

gulp-tslint solves this by forcing the user to pass the Program in as part of the configuration. I think the same could be done here by replacing the typeCheck with a program option? Or maybe allow passing the Program instead of a boolean to the typeCheck? Otherwise it will have to be cached somehow across files.

jbedard avatar May 12 '17 01:05 jbedard

Is it realistic to have more than one loader linting inside a Webpack configuration?

sonicoder86 avatar May 12 '17 12:05 sonicoder86

Are you suggesting just caching the Program globally?

You can easily have multiple webpack configurations running at the same time, with different lint options etc.

jbedard avatar May 12 '17 17:05 jbedard

Maybe caching based on the webpack instance is ok.

sonicoder86 avatar May 12 '17 18:05 sonicoder86

If the webpack instance is recreated per webpack config that should work...

jbedard avatar May 12 '17 18:05 jbedard

We're seeing this issue too. Simply enabling the typeCheck in our project has increased build time from 2 minutes to 40 minutes!!

Using tslint-loader 3.5.3, tslint 5.2.0, webpack 2.5.1.

garethflowers avatar May 14 '17 13:05 garethflowers

same here

sanex3339 avatar May 17 '17 22:05 sanex3339

same here

szebrowski avatar May 18 '17 12:05 szebrowski

We also have performance issues with tslint-loader. Linting is much slower compared to the tslint CLI, even without the typeCheck option (with typeCheck it's even slower).

Now I wanted to create my own tslint watcher and so I was playing around with the tslint API and chokidar. I found out during my testing that it's not a good idea to cache the Program instance, because then tslint will always report the same errors, even if they have been fixed afterwards. Creating the Program instance for every lint seems to be necessary to get correct results.

I never used gulp-tslint, but I took a look at the code and I have no idea why caching the Program instance works there... I'm a bit baffled by this.

simonvizzini avatar May 24 '17 16:05 simonvizzini

For reference, this is the example code I tested this with:

const linterConfigFile = path.resolve(watchDir, "tslint.json");
const tsConfigFile = path.resolve(watchDir, "tsconfig.json");

// Tried to store program instance here, but linter gives wrong results then.
// const tsProgram = Linter.createProgram(tsConfigFile);

const lintFile = (filePath) => {
    // necessary to create tsProgram for every lint...
    const tsProgram = Linter.createProgram(tsConfigFile);
    const linter = new Linter({ formatter: "codeFrame" }, tsProgram);

    const config = Configuration.findConfiguration(linterConfigFile, filePath).results;
    const fileContent = tsProgram.getSourceFile(filePath).getFullText();

    linter.lint(filePath, fileContent, config);
    console.log(linter.getResult().output);
};

chokidar.watch(watchDir, chokidarOptions)
    .on("change", (filePath) => {
        console.log("changed:", filePath);
        lintFile(path.resolve(watchDir, filePath));
    })
    .on("error", console.error.bind(console));

simonvizzini avatar May 24 '17 16:05 simonvizzini

@simonvizzini Can you confirm it is also on the pull request to address this issue?

sonicoder86 avatar May 24 '17 17:05 sonicoder86

Ah, I'm sorry, I totally missed the pull request. This is strange, I'm sure @mtraynham has tested this, and I guess it worked for him. And if it works in gulp-tslint as well then why not here. Not really sure why it didn't work in my minimal sample. I guess this could be a case of "doesn't work on my machine" (work machine which runs Win10).

I'm at home now and I won't be able to investigate this further until monday, but I'll do a quick test later today on my linux machine at home.

simonvizzini avatar May 24 '17 18:05 simonvizzini

I haven't had much time to investigate this further but I found this interesting note in the gulp-tslint README regarding the typeCheck feature.

// NOTE: Ensure 'Linter.createProgram' is called inside the gulp task else the contents of the files will be cached
// if this tasks is called again (eg. as part of a 'watch' task).

This is exactly what I'm experiencing when I cache the program instance, I get back cached results. And if I understand gulp correctly then the gulp task is executed every time for every file change in watch mode, and thus creating a new Program instance every time. So as I see it it's not possible to cache the Program instance and so I don't think the related pull request will work at all. Or I'm still missing something...

simonvizzini avatar May 30 '17 12:05 simonvizzini

@simonvizzini Yeah, that does look like a problem with caching the Program object with only the loader. Although, I assume this is only a problem because you are using Dev Server or some variant of watch mode. That PR may be ok for simple builds.

Alternatively, adding a compiler plugin for this loader which supports events for run & watch-run, we could use those event hooks to recreate the Program object for a "run".

The awesome-typescript-loader does something similar, so it only compiles changed files.

mtraynham avatar Jun 05 '17 16:06 mtraynham

confirming the slowness - build time increased from 1.5 minutes to 15 minutes

zuzusik avatar Jun 06 '17 09:06 zuzusik

@mtraynham you are right that this would work for a single run webpack build, but webpacks --watch flag is an essential feature and should be supported by all loaders out of the box. But I guess your proposal would work.

Also, during my own tslint performance testing I found out that creating the Program object isn't that expensive (unless it is re-created for every single file of course, which only makes sense in a watch mode).

Here is a comparison between running tslint on our codebase directly and using tslint-loader:

webpack without tslint-loader (includes assets, less, etc): ~30 secs webpack with tslint-loader and type checking enabled: ~80 secs tslint CLI, with typechecking: ~6 secs

Using tslint-loader with type checking takes an additional 50 seconds for our webpack build to complete. But using tslint directly from the CLI instead takes only around 6 seconds.

So the performance issues people are reporting here aren't really tslint or typechecking related. As I see it the problem must be either in tslint-loader or webpack itself.

I wrote my own tslint-watcher based on the example I posted in a comment above. It works fine and is super fast. Though it would be best to look into tslint-loader/webpack and try to fix any problems there, I just don't have enough time to do that.

simonvizzini avatar Jun 06 '17 09:06 simonvizzini

Looks we need to teach tslint-loader 2 things:

  1. cache program (already done here: https://github.com/wbuchwalter/tslint-loader/pull/78)
  2. re-create program on watch event - as far as I understand this can be done with webpack compiler plugin

zuzusik avatar Jun 06 '17 09:06 zuzusik

I can confirm this issue here as well. [email protected], [email protected], [email protected] My build times goes from 1m to 20m.

juanpicado avatar Aug 01 '17 13:08 juanpicado

So any news on this?

Martinspire avatar Aug 09 '17 13:08 Martinspire

It's basically unusable. Build time increases by a factor of 10. Sometimes it crashes as well.

use-strict avatar Aug 30 '17 08:08 use-strict

no news regard this? any plans to fix this?

jony89 avatar Sep 05 '17 13:09 jony89

This is not in any way a fix, but I found I can get by for now with following:

  1. Using tslint-loader with typechecking disabled in webpack
  2. Relying on my editor's typescript capabilities (spacemacs - includes type checking) for normal development
  3. Add a pre-push hook to project that runs a full on tslint with typecheck enabled.

Obviously, would love to see this issue get resolved.

akagr avatar Sep 08 '17 08:09 akagr

I switched on https://www.npmjs.com/package/tslint-webpack-plugin

It much better than this loader.

sanex3339 avatar Sep 08 '17 08:09 sanex3339

@sanex3339 tslint-webpack-plugin doesn't seem to have a way to enable type information, nor a way to specify a particular tslint.json.

pelotom avatar Sep 10 '17 00:09 pelotom

It's probably just not explicitly documented in the plugin. See these configuration options: https://github.com/palantir/tslint/blob/master/src/runner.ts#L41 https://github.com/palantir/tslint/blob/master/src/runner.ts#L106 Try passing those flags along with your files definition.

michal-filip avatar Sep 11 '17 12:09 michal-filip

@michal-filip thanks, that does indeed work!

pelotom avatar Sep 11 '17 19:09 pelotom

I'm now happily using tslint-webpack-plugin in dev, but because it doesn't report errors/warnings thru webpack and thus isn't able to fail the build, I still have to use tslint-loader in CI.

pelotom avatar Sep 11 '17 20:09 pelotom

While it is a nice workaround, I think its still better to make sure this bug is fixed in this loader and the issue should also not be closed yet.

Martinspire avatar Sep 14 '17 14:09 Martinspire

any news here ?

keradus avatar Sep 29 '17 09:09 keradus

Still insanely slow

mxchange avatar Oct 11 '17 03:10 mxchange

this issue is 6 months old, any progress on this?

jacobbogers avatar Nov 12 '17 23:11 jacobbogers