Reply To: Bundle size of 2.9 MB

[admin]

Hi Hugh,

The smart.ui.grid is a web component with shadow dom and it includes all the styles imported in the shadow root.
In the default case, the smart.grid.js is used instead as it includes only the scripts. In that case, the CSS styles file is referred usually from index page, angular.json in angular or import in react. The css file name is smart.default.css. In most of the demos on our website, we use smart.grid.js. In examples with stencil and where we want to demonstrate a web component with a shadow dom enabled, we use the wrapper web component smart.ui.grid.js. The smart.grid.js module is 2MB. The inline CSS used in smart.grid.js cannot be moved to a separate file, because it is related to things like rows & columns resize i.e we need dynamic width, height, left and top settings, the scrolling is also part of this. We have scrolling with fixed columns and many additional features which require small amount of inline css. Unfortunately, I do not think that you can make the bundle smaller. We have another option with the more lightweight smart.table component, but it does not have all the features of the Grid.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/