admin: faster build (26s instead of 34s) thanks to react-app-rewired and instructions at https://mui.com/material-ui/guides/minimizing-bundle-size/#option-2
Massimo Melina committed
May 9, 2022 at 19:04 UTC
36be9709268d185204f297fb811950cf354f31c5
4 files changed
+117
-3
admin/.babelrc.js
new
+8
@@ -0,0 +1,8 @@
1
+const plugins = [
2
+ [
3
+ 'babel-plugin-direct-import',
4
+ { modules: ['@mui/material', '@mui/icons-material'] },
5
+ ],
6
+];
7
+
8
+module.exports = { plugins };
admin/config-overrides.js
new
+4
@@ -0,0 +1,4 @@
1
+/* eslint-disable react-hooks/rules-of-hooks */
2
+const { useBabelRc, override } = require('customize-cra');
3
+
4
+module.exports = override(useBabelRc());
admin/package.json
+6
-3
@@ -3,9 +3,9 @@
3
"private": true,
4
"proxy": "http://localhost",
5
"scripts": {
6
- "start": "react-scripts start",
7
- "build": "cross-env GENERATE_SOURCEMAP=false BUILD_PATH='../dist/admin' react-scripts build",
8
- "test": "react-scripts test",
6
+ "start": "react-app-rewired start",
7
+ "build": "cross-env GENERATE_SOURCEMAP=false BUILD_PATH='../dist/admin' react-app-rewired build",
8
+ "test": "react-app-rewired test",
9
"test-dep": "npm audit --production",
10
"eject": "react-scripts eject"
11
},
@@ -37,6 +37,9 @@
37
"@types/react-dom": "^17.0.11",
38
"@types/react-window": "^1.8.5",
39
"@types/react-virtualized-auto-sizer": "^1.0.1",
40
+ "react-app-rewired": "^2.2.1",
41
+ "babel-plugin-direct-import": "^1.0.0",
42
+ "customize-cra": "^1.0.0",
43
"react-scripts": "^5.0.1"
44
},
45
"eslintConfig": {
package-lock.json
+99
@@ -51,6 +51,9 @@
51
"@types/react-dom": "^17.0.11",
52
"@types/react-virtualized-auto-sizer": "^1.0.1",
53
"@types/react-window": "^1.8.5",
54
+ "babel-plugin-direct-import": "^1.0.0",
55
+ "customize-cra": "^1.0.0",
56
+ "react-app-rewired": "^2.2.1",
57
"react-scripts": "^5.0.1"
58
}
59
},
@@ -6247,6 +6250,19 @@
6250
"url": "https://opencollective.com/webpack"
6251
}
6252
},
6253
+ "node_modules/babel-plugin-direct-import": {
6254
+ "version": "1.0.0",
6255
+ "resolved": "https://registry.npmjs.org/babel-plugin-direct-import/-/babel-plugin-direct-import-1.0.0.tgz",
6256
+ "integrity": "sha512-WQCA5RJz/VVKHoxNKMrXc5YdsWw2d3vN2vrfKMdHLzf3+YROzKtlcZFhRjYx82nd30ijtWD4cxhV7RssUpCfjw==",
6257
+ "dev": true,
6258
+ "dependencies": {
6259
+ "resolve": "^1.20.0"
6260
+ },
6261
+ "engines": {
6262
+ "node": ">=12.0.0",
6263
+ "npm": ">=7"
6264
+ }
6265
+ },
6266
"node_modules/babel-plugin-dynamic-import-node": {
6267
"version": "2.3.3",
6268
"resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
@@ -8063,6 +8079,15 @@
8079
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz",
8080
"integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw=="
8081
},
8082
+ "node_modules/customize-cra": {
8083
+ "version": "1.0.0",
8084
+ "resolved": "https://registry.npmjs.org/customize-cra/-/customize-cra-1.0.0.tgz",
8085
+ "integrity": "sha512-DbtaLuy59224U+xCiukkxSq8clq++MOtJ1Et7LED1fLszWe88EoblEYFBJ895sB1mC6B4uu3xPT/IjClELhMbA==",
8086
+ "dev": true,
8087
+ "dependencies": {
8088
+ "lodash.flow": "^3.5.0"
8089
+ }
8090
+ },
8091
"node_modules/cycle": {
8092
"version": "1.0.3",
8093
"resolved": "https://registry.npmjs.org/cycle/-/cycle-1.0.3.tgz",
@@ -14630,6 +14655,12 @@
14655
"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
14656
"dev": true
14657
},
14658
+ "node_modules/lodash.flow": {
14659
+ "version": "3.5.0",
14660
+ "resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz",
14661
+ "integrity": "sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o=",
14662
+ "dev": true
14663
+ },
14664
"node_modules/lodash.isobject": {
14665
"version": "3.0.2",
14666
"resolved": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-3.0.2.tgz",
@@ -17632,6 +17663,30 @@
17663
"node": ">=14"
17664
}
17665
},
17666
+ "node_modules/react-app-rewired": {
17667
+ "version": "2.2.1",
17668
+ "resolved": "https://registry.npmjs.org/react-app-rewired/-/react-app-rewired-2.2.1.tgz",
17669
+ "integrity": "sha512-uFQWTErXeLDrMzOJHKp0h8P1z0LV9HzPGsJ6adOtGlA/B9WfT6Shh4j2tLTTGlXOfiVx6w6iWpp7SOC5pvk+gA==",
17670
+ "dev": true,
17671
+ "dependencies": {
17672
+ "semver": "^5.6.0"
17673
+ },
17674
+ "bin": {
17675
+ "react-app-rewired": "bin/index.js"
17676
+ },
17677
+ "peerDependencies": {
17678
+ "react-scripts": ">=2.1.3"
17679
+ }
17680
+ },
17681
+ "node_modules/react-app-rewired/node_modules/semver": {
17682
+ "version": "5.7.1",
17683
+ "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
17684
+ "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
17685
+ "dev": true,
17686
+ "bin": {
17687
+ "semver": "bin/semver"
17688
+ }
17689
+ },
17690
"node_modules/react-dev-utils": {
17691
"version": "12.0.1",
17692
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -23411,8 +23466,11 @@
23466
"@types/react-dom": "^17.0.11",
23467
"@types/react-virtualized-auto-sizer": "^1.0.1",
23468
"@types/react-window": "^1.8.5",
23469
+ "babel-plugin-direct-import": "^1.0.0",
23470
+ "customize-cra": "^1.0.0",
23471
"js-sha512": "^0.8.0",
23472
"react": "^17.0.2",
23473
+ "react-app-rewired": "^2.2.1",
23474
"react-dom": "^17.0.2",
23475
"react-router-dom": "^6.2.1",
23476
"react-scripts": "^5.0.1",
@@ -26246,6 +26304,15 @@
26304
}
26305
}
26306
},
26307
+ "babel-plugin-direct-import": {
26308
+ "version": "1.0.0",
26309
+ "resolved": "https://registry.npmjs.org/babel-plugin-direct-import/-/babel-plugin-direct-import-1.0.0.tgz",
26310
+ "integrity": "sha512-WQCA5RJz/VVKHoxNKMrXc5YdsWw2d3vN2vrfKMdHLzf3+YROzKtlcZFhRjYx82nd30ijtWD4cxhV7RssUpCfjw==",
26311
+ "dev": true,
26312
+ "requires": {
26313
+ "resolve": "^1.20.0"
26314
+ }
26315
+ },
26316
"babel-plugin-dynamic-import-node": {
26317
"version": "2.3.3",
26318
"resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
@@ -27596,6 +27663,15 @@
27663
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz",
27664
"integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw=="
27665
},
27666
+ "customize-cra": {
27667
+ "version": "1.0.0",
27668
+ "resolved": "https://registry.npmjs.org/customize-cra/-/customize-cra-1.0.0.tgz",
27669
+ "integrity": "sha512-DbtaLuy59224U+xCiukkxSq8clq++MOtJ1Et7LED1fLszWe88EoblEYFBJ895sB1mC6B4uu3xPT/IjClELhMbA==",
27670
+ "dev": true,
27671
+ "requires": {
27672
+ "lodash.flow": "^3.5.0"
27673
+ }
27674
+ },
27675
"cycle": {
27676
"version": "1.0.3",
27677
"resolved": "https://registry.npmjs.org/cycle/-/cycle-1.0.3.tgz",
@@ -32538,6 +32614,12 @@
32614
"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
32615
"dev": true
32616
},
32617
+ "lodash.flow": {
32618
+ "version": "3.5.0",
32619
+ "resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz",
32620
+ "integrity": "sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o=",
32621
+ "dev": true
32622
+ },
32623
"lodash.isobject": {
32624
"version": "3.0.2",
32625
"resolved": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-3.0.2.tgz",
@@ -34642,6 +34724,23 @@
34724
"whatwg-fetch": "^3.6.2"
34725
}
34726
},
34727
+ "react-app-rewired": {
34728
+ "version": "2.2.1",
34729
+ "resolved": "https://registry.npmjs.org/react-app-rewired/-/react-app-rewired-2.2.1.tgz",
34730
+ "integrity": "sha512-uFQWTErXeLDrMzOJHKp0h8P1z0LV9HzPGsJ6adOtGlA/B9WfT6Shh4j2tLTTGlXOfiVx6w6iWpp7SOC5pvk+gA==",
34731
+ "dev": true,
34732
+ "requires": {
34733
+ "semver": "^5.6.0"
34734
+ },
34735
+ "dependencies": {
34736
+ "semver": {
34737
+ "version": "5.7.1",
34738
+ "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
34739
+ "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
34740
+ "dev": true
34741
+ }
34742
+ }
34743
+ },
34744
"react-dev-utils": {
34745
"version": "12.0.1",
34746
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",