Skip to content

Commit cb6ab31

Browse files
jaysonwu991olliecurtisJayson Wu
committed
[LEOP-21]: Add cache-loader to speed up local development (#92)
* Backpackify * add cache-loader to speed up local development * add cache-loader to speed up local development * restore link style of paths.js and webpack.config.js in react-scripts * restore link style of paths.js and webpack.config.js in react-scripts again * restore link style of paths.js and webpack.config.js in react-scripts again 2x * restore link style of paths.js and webpack.config.js in react-scripts again 3x * restore link style of paths.js and webpack.config.js in react-scripts again 4x * restore link style of paths.js and webpack.config.js in react-scripts * update CHANGELOG and the version of @skyscanner/backpack-react-scripts to v9.0.4 * add cache-loader to webpack SSR config but comment that out to not use * change BRS version to v9.1.0 since it is a mirror change * restore build-brs.yml formation as fork branch * add blank space to build-brs.yml to restore formation Co-authored-by: Ollie Curtis <[email protected]> Co-authored-by: Jayson Wu <[email protected]>
1 parent ce77eab commit cb6ab31

File tree

5 files changed

+236
-177
lines changed

5 files changed

+236
-177
lines changed

‎packages/react-scripts/CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# `backpack-react-scripts` Change Log
22

3+
## 9.1.0 - UNRELEASED
4+
5+
Add `cache-loader` to speed up local development
6+
37
## 9.0.3
48

59
- Rebased onto `upstream/master` v4.0.3 (f92c37a6e6636ed1650ffd976c6881f59b1be803)

‎packages/react-scripts/config/paths.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ module.exports = {
106106
ownNodeModules: resolveOwn('node_modules'), // This is empty on npm 3
107107
appTypeDeclarations: resolveApp('src/react-app-env.d.ts'),
108108
ownTypeDeclarations: resolveOwn('lib/react-app.d.ts'),
109+
cacheLoaderDir: resolveOwn('.cache/cache-loader'),
109110
};
110111

111112
const ownPackageJson = require('../package.json');
@@ -143,6 +144,7 @@ if (
143144
ownNodeModules: resolveOwn('node_modules'),
144145
appTypeDeclarations: resolveOwn(`${templatePath}/src/react-app-env.d.ts`),
145146
ownTypeDeclarations: resolveOwn('lib/react-app.d.ts'),
147+
cacheLoaderDir: resolveOwn('.cache/cache-loader'),
146148
};
147149
}
148150
// @remove-on-eject-end

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

Lines changed: 115 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,12 @@ module.exports = function (webpackEnv) {
140140
? { publicPath: '../../' }
141141
: {},
142142
},
143+
isEnvDevelopment && {
144+
loader: require.resolve('cache-loader'),
145+
options: {
146+
cacheDirectory: paths.cacheLoaderDir,
147+
},
148+
},
143149
{
144150
loader: require.resolve('css-loader'),
145151
options: cssOptions,
@@ -465,102 +471,122 @@ module.exports = function (webpackEnv) {
465471
saddlebagModulesRegex,
466472
...customModuleRegexes,
467473
],
468-
loader: require.resolve('babel-loader'),
469-
options: {
470-
customize: require.resolve(
471-
'babel-preset-react-app/webpack-overrides'
472-
),
473-
presets: [
474-
[
475-
require.resolve('babel-preset-react-app'),
476-
{
477-
runtime: hasJsxRuntime ? 'automatic' : 'classic',
478-
},
479-
],
480-
],
481-
// @remove-on-eject-begin
482-
babelrc: false,
483-
configFile: false,
484-
// Make sure we have a unique cache identifier, erring on the
485-
// side of caution.
486-
// We remove this when the user ejects because the default
487-
// is sane and uses Babel options. Instead of options, we use
488-
// the react-scripts and babel-preset-react-app versions.
489-
cacheIdentifier: getCacheIdentifier(
490-
isEnvProduction
491-
? 'production'
492-
: isEnvDevelopment && 'development',
493-
[
494-
'babel-plugin-named-asset-import',
495-
'babel-preset-react-app',
496-
'react-dev-utils',
497-
'react-scripts',
498-
]
499-
),
500-
// @remove-on-eject-end
501-
plugins: [
502-
[
503-
require.resolve('babel-plugin-named-asset-import'),
504-
{
505-
loaderMap: {
506-
svg: {
507-
ReactComponent:
508-
'@svgr/webpack?-svgo,+titleProp,+ref![path]',
474+
use: [
475+
isEnvDevelopment && {
476+
loader: require.resolve('cache-loader'),
477+
options: {
478+
cacheDirectory: paths.cacheLoaderDir,
479+
},
480+
},
481+
{
482+
loader: require.resolve('babel-loader'),
483+
options: {
484+
customize: require.resolve(
485+
'babel-preset-react-app/webpack-overrides',
486+
),
487+
presets: [
488+
[
489+
require.resolve('babel-preset-react-app'),
490+
{
491+
runtime: hasJsxRuntime ? 'automatic' : 'classic',
509492
},
510-
},
511-
},
512-
],
513-
isEnvDevelopment &&
514-
shouldUseReactRefresh &&
515-
require.resolve('react-refresh/babel'),
516-
].filter(Boolean),
517-
// This is a feature of `babel-loader` for webpack (not Babel itself).
518-
// It enables caching results in ./node_modules/.cache/babel-loader/
519-
// directory for faster rebuilds.
520-
cacheDirectory: true,
521-
// See #6846 for context on why cacheCompression is disabled
522-
cacheCompression: false,
523-
compact: isEnvProduction,
524-
},
493+
],
494+
],
495+
// @remove-on-eject-begin
496+
babelrc: false,
497+
configFile: false,
498+
// Make sure we have a unique cache identifier, erring on the
499+
// side of caution.
500+
// We remove this when the user ejects because the default
501+
// is sane and uses Babel options. Instead of options, we use
502+
// the react-scripts and babel-preset-react-app versions.
503+
cacheIdentifier: getCacheIdentifier(
504+
isEnvProduction
505+
? 'production'
506+
: isEnvDevelopment && 'development',
507+
[
508+
'babel-plugin-named-asset-import',
509+
'babel-preset-react-app',
510+
'react-dev-utils',
511+
'react-scripts',
512+
],
513+
),
514+
// @remove-on-eject-end
515+
plugins: [
516+
[
517+
require.resolve('babel-plugin-named-asset-import'),
518+
{
519+
loaderMap: {
520+
svg: {
521+
ReactComponent:
522+
'@svgr/webpack?-svgo,+titleProp,+ref![path]',
523+
},
524+
},
525+
},
526+
],
527+
isEnvDevelopment &&
528+
shouldUseReactRefresh &&
529+
require.resolve('react-refresh/babel'),
530+
].filter(Boolean),
531+
// This is a feature of `babel-loader` for webpack (not Babel itself).
532+
// It enables caching results in ./node_modules/.cache/babel-loader/
533+
// directory for faster rebuilds.
534+
cacheDirectory: true,
535+
// See #6846 for context on why cacheCompression is disabled
536+
cacheCompression: false,
537+
compact: isEnvProduction,
538+
},
539+
},
540+
].filter(Boolean),
525541
},
526542
// Process any JS outside of the app with Babel.
527543
// Unlike the application JS, we only compile the standard ES features.
528544
{
529545
test: /\.(js|mjs)$/,
530546
exclude: /@babel(?:\/|\\{1,2})runtime/,
531-
loader: require.resolve('babel-loader'),
532-
options: {
533-
babelrc: false,
534-
configFile: false,
535-
compact: false,
536-
presets: [
537-
[
538-
require.resolve('babel-preset-react-app/dependencies'),
539-
{ helpers: true },
540-
],
541-
],
542-
cacheDirectory: true,
543-
// See #6846 for context on why cacheCompression is disabled
544-
cacheCompression: false,
545-
// @remove-on-eject-begin
546-
cacheIdentifier: getCacheIdentifier(
547-
isEnvProduction
548-
? 'production'
549-
: isEnvDevelopment && 'development',
550-
[
551-
'babel-plugin-named-asset-import',
552-
'babel-preset-react-app',
553-
'react-dev-utils',
554-
'react-scripts',
555-
]
556-
),
557-
// @remove-on-eject-end
558-
// Babel sourcemaps are needed for debugging into node_modules
559-
// code. Without the options below, debuggers like VSCode
560-
// show incorrect code and set breakpoints on the wrong lines.
561-
sourceMaps: shouldUseSourceMap,
562-
inputSourceMap: shouldUseSourceMap,
563-
},
547+
use: [
548+
isEnvDevelopment && {
549+
loader: require.resolve('cache-loader'),
550+
options: {
551+
cacheDirectory: paths.cacheLoaderDir,
552+
},
553+
},
554+
{
555+
loader: require.resolve('babel-loader'),
556+
options: {
557+
babelrc: false,
558+
configFile: false,
559+
compact: false,
560+
presets: [
561+
[
562+
require.resolve('babel-preset-react-app/dependencies'),
563+
{ helpers: true },
564+
],
565+
],
566+
cacheDirectory: true,
567+
// See #6846 for context on why cacheCompression is disabled
568+
cacheCompression: false,
569+
// @remove-on-eject-begin
570+
cacheIdentifier: getCacheIdentifier(
571+
isEnvProduction
572+
? 'production'
573+
: isEnvDevelopment && 'development',
574+
[
575+
'babel-plugin-named-asset-import',
576+
'babel-preset-react-app',
577+
'react-dev-utils',
578+
'react-scripts',
579+
],
580+
),
581+
// @remove-on-eject-end
582+
// Babel sourcemaps are needed for debugging into node_modules
583+
// code. Without the options below, debuggers like VSCode
584+
// show incorrect code and set breakpoints on the wrong lines.
585+
sourceMaps: shouldUseSourceMap,
586+
inputSourceMap: shouldUseSourceMap,
587+
},
588+
},
589+
].filter(Boolean),
564590
},
565591
// "postcss" loader applies autoprefixer to our CSS.
566592
// "css" loader resolves paths in CSS and adds assets as dependencies.

0 commit comments

Comments
 (0)