[LEOP-166]: Move cache-loader above resolve-url-loader to get the bes…

…t performance (#102)

* Move cache-loader above resolve-url-loader to get the best performance

Co-authored-by: Jayson Wu <jayson.wu@skyscanner.net>

packages/react-scripts/CHANGELOG.md

@@ -1,5 +1,11 @@
 # `backpack-react-scripts` Change Log
 
+## 9.3.1
+
+- Move `cache-loader` above `resolve-url-loader` to get the best performance
+  - Note that there is an overhead for saving the reading and saving the cache file, so only use this loader to cache expensive loaders. It is said that `cache-loader` shouldn't deal with all the loaders and only the expensive parts.
+  - Moving `cache-loader` above resolve-url-loader is because cache files it generates after this operation are small and it is faster to read the cache files, and it saves more time than `cache-loader` below resolve-url-loader, we can still speed up the process of compiling sass to css since sass-loader is the most expensive
+
 ## 9.3.0
 
 - Apply `cache-loader` on CI

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

@@ -192,21 +192,19 @@ module.exports = function (webpackEnv) {
     if (preProcessor) {
       loaders.push(
         ...[
+          shouldUseCacheLoader && {
+            loader: require.resolve('cache-loader'),
+            options: {
+              cacheDirectory: paths.cacheLoaderDir,
+            },
+          },
           {
             loader: require.resolve('resolve-url-loader'),
             options: {
               sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
               root: paths.appSrc,
             },
           },
-          // Because sass-loader is the most expensive, so put cache-loader here to only cache sass-loader
-          // Note that there is an overhead for saving the reading and saving the cache file, so only use this loader to cache expensive loaders.
-          shouldUseCacheLoader && {
-            loader: require.resolve('cache-loader'),
-            options: {
-              cacheDirectory: paths.cacheLoaderDir,
-            },
-          },
           {
             loader: require.resolve(preProcessor),
             options: {
@@ -732,8 +730,8 @@ module.exports = function (webpackEnv) {
               exclude: sassModuleRegex,
               use: getStyleLoaders(
                 {
-                  // When using sass-loader, the total count of loaders is up to 4 including cache-loader below the css-loader
-                  // When not using sass-loader, the total count of loaders is 3 not including cache-loader below the css-loader
+                  // When using cache-loader, the total count of loaders is up to 4 including cache-loader below the css-loader
+                  // When not using cache-loader, the total count of loaders is 3 not including cache-loader below the css-loader
                   importLoaders: shouldUseCacheLoader ? 4 : 3,
                   sourceMap: isEnvProduction
                     ? shouldUseSourceMap
@@ -768,8 +766,8 @@ module.exports = function (webpackEnv) {
               ],
               use: getStyleLoaders(
                 {
-                  // When using sass-loader, the total count of loaders is up to 4 including cache-loader below the css-loader
-                  // When not using sass-loader, the total count of loaders is 3 not including cache-loader below the css-loader
+                  // When using cache-loader, the total count of loaders is up to 4 including cache-loader below the css-loader
+                  // When not using cache-loader, the total count of loaders is 3 not including cache-loader below the css-loader
                   importLoaders: shouldUseCacheLoader ? 4 : 3,
                   sourceMap: isEnvProduction
                     ? shouldUseSourceMap

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

@@ -188,21 +188,19 @@ module.exports = function (webpackEnv) {
     if (preProcessor) {
       loaders.push(
         ...[
+          // shouldUseCacheLoader && {
+          //   loader: require.resolve('cache-loader'),
+          //   options: {
+          //     cacheDirectory: paths.cacheLoaderDir,
+          //   },
+          // },
           {
             loader: require.resolve('resolve-url-loader'),
             options: {
               sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
               root: paths.appSrc,
             },
           },
-          // Because sass-loader is the most expensive, so put cache-loader here to only cache sass-loader
-          // Note that there is an overhead for saving the reading and saving the cache file, so only use this loader to cache expensive loaders.
-          // shouldUseCacheLoader && {
-          //   loader: require.resolve('cache-loader'),
-          //   options: {
-          //     cacheDirectory: paths.cacheLoaderDir,
-          //   },
-          // },
           {
             loader: require.resolve(preProcessor),
             options: {
@@ -734,8 +732,8 @@ module.exports = function (webpackEnv) {
               exclude: sassModuleRegex,
               use: getStyleLoaders(
                 {
-                  // When using sass-loader, the total count of loaders is up to 4 including cache-loader below the css-loader
-                  // When not using sass-loader, the total count of loaders is 3 not including cache-loader below the css-loader
+                  // When using cache-loader, the total count of loaders is up to 4 including cache-loader below the css-loader
+                  // When not using cache-loader, the total count of loaders is 3 not including cache-loader below the css-loader
                   // importLoaders: shouldUseCacheLoader ? 4 : 3,
                   importLoaders: 3,
                   sourceMap: isEnvProduction
@@ -771,8 +769,8 @@ module.exports = function (webpackEnv) {
               ],
               use: getStyleLoaders(
                 {
-                  // When using sass-loader, the total count of loaders is up to 4 including cache-loader below the css-loader
-                  // When not using sass-loader, the total count of loaders is 3 not including cache-loader below the css-loader
+                  // When using cache-loader, the total count of loaders is up to 4 including cache-loader below the css-loader
+                  // When not using cache-loader, the total count of loaders is 3 not including cache-loader below the css-loader
                   // importLoaders: shouldUseCacheLoader ? 4 : 3,
                   importLoaders: 3,
                   sourceMap: isEnvProduction

packages/react-scripts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-react-scripts",
-  "version": "9.3.0",
+  "version": "9.3.1",
   "description": "Backpack configuration and scripts for Create React App.",
   "repository": {
     "type": "git",