Skip to content

Commit

Permalink
[ST-5243] Make splitChunks configurable
Browse files Browse the repository at this point in the history
  • Loading branch information
James ODonnell committed Oct 10, 2023
1 parent ccba8c3 commit 85807e1
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 16 deletions.
1 change: 1 addition & 0 deletions packages/react-scripts/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ npm start
- `babelIncludePrefixes`: An array of module name prefixes to opt into babel compilation, including local import module, e.g. `"../common"`. Includes `["@skyscanner/bpk-", "bpk-", "saddlebag-"]` by default.
- `enableAutomaticChunking`: Boolean, opt in to automatic chunking of vendor, common and app code.
- `vendorsChunkRegex`: String, Regex for picking what goes into the `vendors` chunk. See `cacheGroups` in webpack docs. Dependent on `enableAutomaticChunking` being enabled
- `splitChunksConfig`: Object, mapping to the [structure in the webpack docs](https://webpack.js.org/plugins/split-chunks-plugin/#optimizationsplitchunks). Applied only if `enableAutomaticChunking` is false, ignores `vendorsChunkRegex` if defined.
- `amdExcludes`: Array of module names to exclude from AMD parsing. Incldues `["lodash"]` by default.
- `externals`: exposing the Webpack config to modify externals, see [docs](https://webpack.js.org/configuration/externals/).
- `ssrExternals`: Similar to above, but for `ssr.js` only.
Expand Down
1 change: 1 addition & 0 deletions packages/react-scripts/backpack-addons/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ Our react scripts fork includes a number of custom configuration items in order
| **ssrExternals** | The same as above `externals` except used for server side rendering only in **ssr.js** | **{}** |
| **enableAutomaticChunking** | Opts into automatic chunking of vender, common and app code.<br> When enabled the **splitChunks** plugin creates vender and common chunks which are split and when provided uses the `venderChunkRegex` to specify what is in each chunk.<br> When enabled **runtimeChunk** plugin creates a separate runtime chunk for projects to enable long term caching. | **false** |
| **vendorsChunkRegex** | Regex for picking what goes into the vendors chunk. Requires enableAutomaticChunking to be enabled.<br> See [cacheGroups](https://webpack.js.org/plugins/split-chunks-plugin/#splitchunkscachegroups) docs for further details. | |
| **splitChunksConfig** | Object, mapping to the [structure in the webpack docs](https://webpack.js.org/plugins/split-chunks-plugin/#optimizationsplitchunks).<br> Applied only if `enableAutomaticChunking` is false, ignores `vendorsChunkRegex` if defined. | |
| **sassFunctions** | This function encodes svg content into `base64` when there is a `bpk-icon` in the.scss file. | |

## How to add new feature
Expand Down
94 changes: 78 additions & 16 deletions packages/react-scripts/backpack-addons/splitChunks.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,85 @@ const paths = require('../config/paths');
const appPackageJson = require(paths.appPackageJson);
const bpkReactScriptsConfig = appPackageJson['backpack-react-scripts'] || {};

/**
* Defines a webpack splitChunks configuration, optionally based on consumer configuration.
*
* For automatic configuration set enableAutomaticChunking and optionally provide a vendorsChunkRegex string, e.g:
*
* // package.json
* ...
* "backpack-react-scripts": {
* ...
* "enableAutomaticChunking": true,
* "vendorsChunkRegex": "...",
* ...
* }
* ...
*
* For custom configuration disable enableAutomaticChunking and provide a configuration object, e.g:
*
* // package.json
* ...
* "backpack-react-scripts": {
* ...
* "enableAutomaticChunking": false,
* "splitChunksConfig": {
* "chunks": "all",
* ...
* "cacheGroups": {
* "vendors": {
* "test": "..."
* },
* "customChunk": {
* "test": "..."
* "priority": 100,
* "chunks": "all",
* "name": "customChunk",
* },
* },
* ...
* }
* ...
*
* References:
* https://webpack.js.org/plugins/split-chunks-plugin/#optimizationsplitchunks
* https://webpack.js.org/plugins/split-chunks-plugin/#splitchunkscachegroups
* https://twitter.com/wSokra/status/969633336732905474
* https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
*/

module.exports = (isEnvDevelopment) => {
// Automatically split vendor and commons
// https://twitter.com/wSokra/status/969633336732905474
// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
return {
splitChunks: bpkReactScriptsConfig.enableAutomaticChunking
? {

let splitChunksConfig = {}

// If opted in to automatic chunking, apply default configuration
if (bpkReactScriptsConfig.enableAutomaticChunking) {
splitChunksConfig = {
chunks: 'all',
name: isEnvDevelopment,
cacheGroups: bpkReactScriptsConfig.vendorsChunkRegex
? {
vendors: {
test: new RegExp(bpkReactScriptsConfig.vendorsChunkRegex)
},
}
: {},
}
: {}
cacheGroups: {},
};
// Apply vendorsChunkRegex if provided
if (bpkReactScriptsConfig.vendorsChunkRegex) {
splitChunksConfig.cacheGroups = {
vendors: {
// Regexes are passed as strings in package.json config, but need constructed here.
test: new RegExp(bpkReactScriptsConfig.vendorsChunkRegex),
},
};
}
}
};
// If not opted in to automatic chunking, use custom configuration - if defined.
else if(bpkReactScriptsConfig.splitChunksConfig) {
//
splitChunksConfig = { ...bpkReactScriptsConfig.splitChunksConfig, name: isEnvDevelopment}
// Regexes are passed as strings in package.json config, but need constructed here.
for(let cacheGroup of Object.keys(splitChunksConfig.cacheGroups)){
splitChunksConfig.cacheGroups[cacheGroup].test = new RegExp(splitChunksConfig.cacheGroups[cacheGroup].test);
}
}

return {
splitChunks: splitChunksConfig
};
};

0 comments on commit 85807e1

Please sign in to comment.