NO_JIRA: Extract and optimise JS Loaders #178
Conversation
xalechez
commented
Nov 14, 2023
•
xalechez
commented
- Extracted loaders that are identical for CSR and SSR
- Removed the second round of babel-loader
- Made TS Checker optional for react-scripts build
- Made Backpack regexes optional for styles
xalechez
force-pushed
the
extract-js-loaders
branch
from
d1741f2 to
2ea7648
Compare
| const paths = require('../config/paths'); | ||
| const appPackageJson = require(paths.appPackageJson); | ||
| const bpkReactScriptsConfig = appPackageJson['backpack-react-scripts'] || {}; | ||
| const cssModulesEnabled = bpkReactScriptsConfig.cssModules !== false; | ||
| const noBackpackStylePrefixes = | ||
| bpkReactScriptsConfig.danger_noBackpackStylePrefixes !== false; |
There was a problem hiding this comment.
Early tests show that we can live without these. Now I'd like to do more tests under this flag
| const skipProductionTypeCheck = | ||
| bpkReactScriptsConfig.skipProductionTypeCheck || false; | ||
|
|
||
| const useTsChecker = ( |
There was a problem hiding this comment.
Skipping TS Checker plugin results in around 20-30% build time reduction as early tests show. tsc can do the same job better and faster. I've made a new flag that is totally opt-in for consumers and keep type checking during development
There was a problem hiding this comment.
Used this plugin to measure loaders and plugins speed
| @@ -0,0 +1,69 @@ | |||
| 'use strict'; | |||
There was a problem hiding this comment.
This code is identical in two configs. Extracting helps to avoid undesired mismatch
| @@ -0,0 +1,103 @@ | |||
| 'use strict'; | |||
There was a problem hiding this comment.
This code is identical in two configs. Extracting helps to avoid undesired mismatch
| return [ | ||
| // Process application JS with Babel. | ||
| // The preset includes JSX, Flow, TypeScript, and some ESnext features. | ||
| { |
There was a problem hiding this comment.
I've removed the second round of Babel which was unnecessary
| require('../backpack-addons/amdExcludes'), // #backpack-addons amdExcludes | ||
| // "url" loader works like "file" loader except that it embeds assets | ||
| // smaller than specified limit in bytes as data URLs to avoid requests. | ||
| // A missing `test` is equivalent to a match. | ||
| { |
| loader: require.resolve('@svgr/webpack'), | ||
| options: { | ||
| prettier: false, | ||
| svgoConfig: { |
