From 4e6ea3a96048466611704db246a86a4423086bf5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9gis=20Behmo?= <regis@behmo.com>
Date: Tue, 1 Apr 2025 10:15:09 +0200
Subject: [PATCH] feat: faster babel-loader by excluding node_module

The role of `babel-loader` is twofold:

- Compile jsx (react) assets to js
- Make js assets compatible with older browsers

See the official documentation here: https://webpack.js.org/loaders/babel-loader/

It is widely recommended to exclude files in node_modules/ from that loader. See for instance: https://webpack.js.org/loaders/babel-loader/#babel-loader-is-slow Indeed, such files are assumed to be already compatible with older browsers, and built from jsx.

However, the base configuration in frontend-build had the following `exclude` directive:

    exclude: /node_modules\/(?!@(open)?edx)/,

Which means that only `@openedx` and `@edx` assets were excluded.

With this change, we reduce the build time significantly for all MFEs.
For instance:

- frontend-app-profile: 86s -> 64s (-26%)
- frontend-app-learning: 167s -> 110s (-34%)

We observe a change in the fingerprint of app.js and app.css, but we
don't consider these changes to be significant. The generated MFEs still
worked when we tested them. If we realize later that some modules need
to be compiled with babel, then we should explicitly include them with
`and` directives, as documented here: https://webpack.js.org/loaders/babel-loader/#some-files-in-my-node_modules-are-not-transpiled-for-ie-11
---
 config/webpack.dev-stage.config.js | 2 +-
 config/webpack.dev.config.js       | 2 +-
 config/webpack.prod.config.js      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/config/webpack.dev-stage.config.js b/config/webpack.dev-stage.config.js
index 001ba145e..8efc68988 100644
--- a/config/webpack.dev-stage.config.js
+++ b/config/webpack.dev-stage.config.js
@@ -47,7 +47,7 @@ module.exports = merge(commonConfig, {
       // Babel is configured with the .babelrc file at the root of the project.
       {
         test: /\.(js|jsx)$/,
-        exclude: /node_modules\/(?!@(open)?edx)/,
+        exclude: /node_modules/,
         use: {
           loader: 'babel-loader',
           options: {
diff --git a/config/webpack.dev.config.js b/config/webpack.dev.config.js
index 66278d86f..a5ab2c404 100644
--- a/config/webpack.dev.config.js
+++ b/config/webpack.dev.config.js
@@ -90,7 +90,7 @@ module.exports = merge(commonConfig, {
       // Babel is configured with the .babelrc file at the root of the project.
       {
         test: /\.(js|jsx|ts|tsx)$/,
-        exclude: /node_modules\/(?!@(open)?edx)/,
+        exclude: /node_modules/,
         use: {
           loader: 'babel-loader',
           options: {
diff --git a/config/webpack.prod.config.js b/config/webpack.prod.config.js
index 2f05591c0..b16ddc59c 100644
--- a/config/webpack.prod.config.js
+++ b/config/webpack.prod.config.js
@@ -71,7 +71,7 @@ module.exports = merge(commonConfig, {
       // Babel is configured with the .babelrc file at the root of the project.
       {
         test: /\.(js|jsx|ts|tsx)$/,
-        exclude: /node_modules\/(?!@(open)?edx)/,
+        exclude: /node_modules/,
         use: {
           loader: 'babel-loader',
           options: {