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.
Here is the answer for you. Currently I'm upgrade my Angular 13 to Angular 14 project using nx and I find out the "barrel side effect" cause your main.js bundle increase. The solution is simple. full explain is here https://webpack.js.org/guides/tree-shaking/#conclusion and here https://github.com/angular/angular-cli/issues/16799 and here https://stackoverflow.com/a/59353152/5748537. But I can make it short for you: you have module "A is small", and "B is Big". you write them in UI library and export both of them in index.ts file. you import A in your project. final bundle still includes B which you dont want. Why? because commonjs is not smart. using es2020 is better, they understand which is use and which is not. But they not sure should it be remove or not. you add sideEffects: false to tell them: "clear dead codeis safe". and they did it. Then your bundle is small. this can use in any modern JS framework include React, VueJS read the issue in angular project about barrel side effect here: https://github.com/angular/angular-cli/issues/16799