question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support Lazy Loading Rules from 3rd Party Plugins

See original GitHub issue

The version of ESLint you are using. 7.27.0

The problem you want to solve.

Large 3rd-party ESLint plugins can often define hundreds of rules.

Loading all of these rules if the user only configures one or two can be wasteful, especially if the rule sets up some global state as part of being loaded.

As an example - at Facebook our internal ESLint plugin defines ~570 rules. Some of these rules are only enabled on parts of the codeabse and read configuration files from the repo that in some cases can be hundreds of KB (or even a few MB in some cases). Or some rules read in GraphQL schema information (which at FB is sized in the gigabytes and takes tens of seconds to produce).

For 3rd-party plugins ESLint will explicitly and forcefully iterate and resolve every single one of a plugin’s rules, regardless of if they are actually used: https://github.com/eslint/eslintrc/blob/9bf2ba12e6c0bfe7296774531fd79dea23d4c805/lib/config-array/config-array.js#L326-L337

OTOH, ESLint wraps its core rules object in a LazyLoadingRuleMap which allows the engine to load in lint rules if and only if they are explicitly used by the user. ESLint’s engine is hard-coded to respects this lazy-loading style only for the core rules.

I’ve tried playing around with a few solutions in user-land, like using a Proxy:

const rules = {
  'rule': () => require('./rule');
};

module.exports = new Proxy(rules, {
  get(target, key) {
    if (key in target) {
      return target[key]();
    }
    return undefined;
  },
});

But because of ESLint’s usage of Object.entries to collect and normalise all of a plugin’s rules - it is no different to just defining an object.

Your take on the correct solution to problem. ESLint should treat 3rd-party plugins the same as its core rules - it should not iterate the set of plugin rules automatically and should instead only access the rules that the configuration explicitly enables.

Alternately ESLint could expose its LazyLoadingRuleMap utility publicly and then do feature detection like plugin.rules instanceof LazyLoadingRuleMap to conditionally enable the lazy-loading feature, in case you are concerned about an unintentional breaking change.

Are you willing to submit a pull request to implement this change? I’m short on OSS time, but I could look into it at some point.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
nzakascommented, Oct 16, 2021

I’m still planning on addressing this in the new config system. I think it’s actually already working in my prototype but haven’t validated it yet.

0reactions
github-actions[bot]commented, Oct 15, 2021

Oops! It looks like we lost track of this issue. @eslint/eslint-tsc what do we want to do here? This issue will auto-close in 7 days without an update.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Efficiently load third-party JavaScript - web.dev
Learn how to avoid the common pitfalls of using third-party scripts to improve load times and user experience.
Read more >
Lazy load third-party resources with facades - GTmetrix
Lazy loading your third-party resources with facades basically means delaying the loading of your actual third-party embeds and replacing them with static ...
Read more >
How and when (not) to use webpack for lazy loading? - Medium
You can load only the files you want and improve your app's performance. Webpack allows you to lazy load 3rd-party libraries, and, even...
Read more >
Lazy Loading | webpack
bundle.js , to be generated and technically "lazy-loads" it as soon as the script is run. The trouble is that no user interaction...
Read more >
Best Tool for Lazyloading (Theme or Plugin?) - WordPress.org
Images can now be lazyloaded using either a theme's option, SG optimizer, or some other 3rd party plugin such as WP Rocket.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found