Skip to content

NO_JIRA: Extract and optimise JS Loaders#178

Merged
Alex Sannikov (xalechez) merged 2 commits into
fork_cra5from
extract-js-loaders
Nov 15, 2023
Merged

NO_JIRA: Extract and optimise JS Loaders#178
Alex Sannikov (xalechez) merged 2 commits into
fork_cra5from
extract-js-loaders

Conversation

@xalechez

@xalechez Alex Sannikov (xalechez) commented Nov 14, 2023

Copy link
Copy Markdown
  • 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

const bpkReactScriptsConfig = appPackageJson['backpack-react-scripts'] || {};
const cssModulesEnabled = bpkReactScriptsConfig.cssModules !== false;
const noBackpackStylePrefixes =
bpkReactScriptsConfig.danger_noBackpackStylePrefixes !== false;

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 = (

@xalechez Alex Sannikov (xalechez) Nov 15, 2023

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Used this plugin to measure loaders and plugins speed

@@ -0,0 +1,69 @@
'use strict';

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This code is identical in two configs. Extracting helps to avoid undesired mismatch

@@ -0,0 +1,103 @@
'use strict';

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
{

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've removed the second round of Babel which was unnecessary

// "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.
{

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This code was extracted

loader: require.resolve('@svgr/webpack'),
options: {
prettier: false,
svgoConfig: {

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Addressed comments from #177

@xalechez Alex Sannikov (xalechez) merged commit 6802d89 into fork_cra5 Nov 15, 2023
@xalechez Alex Sannikov (xalechez) deleted the extract-js-loaders branch November 30, 2023 09:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants