Setup a Mechanism for creating optimized production builds

[incorbador]

Target

We want to build a production build setup for our packages which is highly customizable, has good built-in optimization support and is being widely used by open-source community.

Research

To achieve our target we looked into different options which can build minified and optimized builds. The list of tools we have looked into were:

• Webpack
• Parcel
• TurboPack
• Rollup
• tsc

Decided to go with Webpack

Though all of the tools offer some great features, we have decided to go with Webpack because of the following reasons:

1. Highly Customizable: Webpack offers a high degree of customization through its extensive plugin and loader ecosystem, making it ideal for complex projects with specific bundling needs like ours.
2. Mature and Widely Used: Webpack is one of the most mature and widely used bundlers in the industry, with a large community and extensive documentation. This means whether we are working on VanillaJS package or React or Angular or Vue we know that we can find a number of opensource tools and examples of how to use webpack properly for these packages.

[Aby-JS]

For web-core we would be creating two separate optimized builds. One for the SDK packages and one for the complete packages. Some key points are the following:

• SDK build will not include FlowHandlerService and any other part of the code it does not need.
• We would be making use of Webpack's code splitting and tree shaking capabilities, along with conditional imports and environment variables for creating two separate builds.
• We would configure Webpack to create separate entry points for sdk and complete packages. This way, we can control what gets included in each build.

[incorbador]

Remaining:

• final testing
• renaming of types

[incorbador]

Faced bugs:

• local packages were not used by the example applications
• external, peerDependencies