@cpro-js/craco-plugin-ui5-webcomponents
v0.2.0
Published
This is a [craco](https://github.com/gsoft-inc/craco) plugin that improves the bundling of [ui5-webcomponents](https://github.com/SAP/ui5-webcomponents) for [create-react-app](https://facebook.github.io/create-react-app/) version 4.
Downloads
10
Readme
Craco Plugin UI5 Webcomponents
This is a craco plugin that improves the bundling of ui5-webcomponents for create-react-app version 4.
UI5 Webcomponents for react is made of several packages. Each package produces its own locale and language specific message bundles. By design each bundle is loaded asynchronously with the result of loading only the needed stuff. But this leads to several async requests in the browser which may impact your rendering time and increases the TTI (Time To Interactive).
This plugin reconfigures webpacks default code splitting mechanism to group all of those language and locale specific files of all ui5 webcomponent packages by language. The files are still loaded asynchronously but instead of fetching multiple files only one file will be loaded. The tradeoff is an increase in the resulting bundle size that will be loaded asynchronously.
Note: This plugin is only applied for production builds.
Installation
- Follow
the
craco
Installation Instructions to install thecraco
package with modified scripts in yourpackage.json
. - Create a
craco.config.js
file. - Install
@cpro-js/craco-plugin-ui5-webcomponents
:
yarn add --dev @cpro-js/craco-plugin-ui5-webcomponents
- Initialize the craco plugin in your
craco.config.js
craco.config.js
module.exports = {
plugins: [
{
plugin: require("@cpro-js/craco-plugin-ui5-webcomponents"),
}
]
};
- Build your app for production.