[LEOP-23]: Add thread-loader to speed up webpack workflow (#93)

* Backpackify

* add thread-loader to webpack config

* add thread-loader to webpack SSR config but comment that out to not use

* add CHANGELOG and upgrade version to v9.1.1

* restore build-brs.yml formation as fork branch

Co-authored-by: Ollie Curtis <8831547+olliecurtis@users.noreply.github.com>
Co-authored-by: Jayson Wu <jayson.wu@skyscanner.net>

Author: 3 people

packages/react-scripts/CHANGELOG.md

@@ -2,7 +2,8 @@
 
 ## 9.1.0 - UNRELEASED
 
-Add `cache-loader` to speed up local development
+- Add `thread-loader` to speed up webpack workflow by bundling in parallels
+- Add `cache-loader` to speed up local development
 
 ## 9.0.3
 

packages/react-scripts/config/webpack.config.js

@@ -40,6 +40,17 @@ const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
 // @remove-on-eject-end
 const postcssNormalize = require('postcss-normalize');
 
+const threadLoader = require('thread-loader');
+
+// This boots the max number of workers in the pool and loads specified modules into the node.js module cache.
+const jsWorkerPool = {
+  // can be set to Infinity for watching builds to keep workers alive
+  poolTimeout: 2000,
+};
+
+// To prevent the high delay when booting workers it possible to warmup the worker pool.
+threadLoader.warmup(jsWorkerPool, ['babel-loader']);
+
 const appPackageJson = require(paths.appPackageJson);
 
 const sassFunctions = require('bpk-mixins/sass-functions');
@@ -472,6 +483,10 @@ module.exports = function (webpackEnv) {
                 ...customModuleRegexes,
               ],
               use: [
+                {
+                  loader: require.resolve('thread-loader'),
+                  options: jsWorkerPool,
+                },
                 isEnvDevelopment && {
                   loader: require.resolve('cache-loader'),
                   options: {
@@ -545,6 +560,10 @@ module.exports = function (webpackEnv) {
               test: /\.(js|mjs)$/,
               exclude: /@babel(?:\/|\\{1,2})runtime/,
               use: [
+                {
+                  loader: require.resolve('thread-loader'),
+                  options: jsWorkerPool,
+                },
                 isEnvDevelopment && {
                   loader: require.resolve('cache-loader'),
                   options: {

packages/react-scripts/config/webpack.config.ssr.js

@@ -40,6 +40,17 @@ const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
 // @remove-on-eject-end
 const postcssNormalize = require('postcss-normalize');
 
+// const threadLoader = require('thread-loader');
+
+// // This boots the max number of workers in the pool and loads specified modules into the node.js module cache.
+// const jsWorkerPool = {
+//   // can be set to Infinity for watching builds to keep workers alive
+//   poolTimeout: 2000,
+// };
+
+// // To prevent the high delay when booting workers it possible to warmup the worker pool.
+// threadLoader.warmup(jsWorkerPool, ['babel-loader']);
+
 const appPackageJson = require(paths.appPackageJson);
 
 const sassFunctions = require('bpk-mixins/sass-functions');
@@ -474,6 +485,10 @@ module.exports = function (webpackEnv) {
                 ...customModuleRegexes,
               ],
               use: [
+                // {
+                //   loader: require.resolve('thread-loader'),
+                //   options: jsWorkerPool,
+                // },
                 // isEnvDevelopment && {
                 //   loader: require.resolve('cache-loader'),
                 //   options: {
@@ -547,6 +562,10 @@ module.exports = function (webpackEnv) {
               test: /\.(js|mjs)$/,
               exclude: /@babel(?:\/|\\{1,2})runtime/,
               use: [
+                // {
+                //   loader: require.resolve('thread-loader'),
+                //   options: jsWorkerPool,
+                // },
                 // isEnvDevelopment && {
                 //   loader: require.resolve('cache-loader'),
                 //   options: {

packages/react-scripts/package.json

@@ -71,6 +71,7 @@
     "semver": "7.3.2",
     "style-loader": "1.3.0",
     "terser-webpack-plugin": "4.2.3",
+    "thread-loader": "^3.0.3",
     "ts-pnp": "1.2.0",
     "url-loader": "4.1.1",
     "webpack": "4.44.2",