Skip to content

Webpack settings: "IgnorePlugin(/^\.\/locale$/, /moment$/)" cost is linear with dependency count #11702

Open
@Ricola3D

Description

@Ricola3D

Is your proposal related to a problem?

React-scripts builds is unnecessarily slow for industrial projects (ex: ~50 dependencies). After analysis with SMP, the webpack plugin to ignore Method.js huge locale files cost 40-60s for such a project (for a total build time of 1min40, it is more than 50% of performances lost). If you do not use Method.js, it is a total loss of build-time on each code modification.

Also, according to Moment NPM page: "Moment.js is a legacy project, now in maintenance mode. In most cases, you should choose a different library."

Describe the solution you'd like

  1. Please just add a configuration (ENV variable ?) to disable this webpack plugin if we don't use Moment.js. For ex, same as the one for disable webpack ESLint plugin.

or

  1. In the webpack.config.js file, check if directory "node_modules" contains a moment sub directory before adding the ignore plugin ? With a code similar to:
try {
  fs.existsSync('./node_modules/moment');
  shouldAddIgnorePlugin = true;
} catch (err) {
  shouldAddIgnorePlugin = false;
}

Describe alternatives you've considered

The only alternative I found for now is to use react-app-rewired (and optionally customize-cra and remove the plugin manually with the code below:

config.plugins = (config.plugins || []).filter(
    (plugin) =>
      !(
        // IgnorePlugin for huge local files of the popular Moment.js library
        (
          plugin instanceof webpack.IgnorePlugin &&
          plugin.resourceRegExp === /^\.\/locale$/ &&
          plugin.contextRegExp === /moment$/
        )
      )
  )

Additional context

(Write your answer here.)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions