Our great sponsors
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
Github repository for the project: https://github.com/IvanGadjo/OneVendorsBundle_ModFedPlugin_SplitChunksPlugin
In this post I will try to demonstrate the power of using Webpack’s ModuleFederationPlugin to share modules between two simple web applications, one acting as a host (app1) and the other one as a remote (app2). Moreover, to make it simpler, both apps will be written in plain JavaScript. The idea is that the host will load the bundles of a function, which uses one Lodash method, as well as a button component, which uses the D3 library, directly from the remote app using Webpack’s ModuleFederationPlugin. Finally, I will show you how to achieve bundling these two vendor libraries’ bundles into one bundle using Webpack’s SplitChunksPlugin, so that they can be shared between the remote and host applications as one chunk and improve performance.
In this post I will try to demonstrate the power of using Webpack’s ModuleFederationPlugin to share modules between two simple web applications, one acting as a host (app1) and the other one as a remote (app2). Moreover, to make it simpler, both apps will be written in plain JavaScript. The idea is that the host will load the bundles of a function, which uses one Lodash method, as well as a button component, which uses the D3 library, directly from the remote app using Webpack’s ModuleFederationPlugin. Finally, I will show you how to achieve bundling these two vendor libraries’ bundles into one bundle using Webpack’s SplitChunksPlugin, so that they can be shared between the remote and host applications as one chunk and improve performance.