Bundle size of 2.9 MB

[Hugh Anderson]

Greetings, we are evaluating html Smart.Grid as a replacement for ag-grid library we currently use in our Enterprise application for tax.com.

Part of this analysis includes a bytes size measurement and in this Smart.Grid had a failure.  Most other ways this lib seems superior to ag-grid but the size is a concern.  Part of my analysis of new libs includes a run of webpack-bundle-analyzer to take a picture of the generated bundles and make sure we are still able to accommodate our friends on handheld devices with slower connections.

Our Smart.Grid install is the “free trial” and was installed with “npm i” command, per the website instructions.  I noticed that inside the generated Grid bundle we have a lot of inline Css.  I’m wondering if that might be able to be moved to a separate file, or if we might have more control over that, when we purchase a full license?  I see a lot of not-relevant css for like charts and accordion and stuff, in the bundle, we need only the grid functionality.

Here’s the output from webpack-bundle-analyzer.  In this picture on the left we see largest bundle is that of Smart.Grid, it is larger than entire app main bundle which includes all Angular.  Can you please comment, whether this is expected, and any strategy to get this down to around half the size or less?

[actually i am unable to upload an image and i do not have a host for that.]  but i took a picture of the lazy-loaded Smart.Grid bundle and it is 2.99 MB compared to our main bundle of 1.83 MB who includes all Angular, and ng-bootstrap, ngx-markdown, etc.

EDIT: I forgot to mention that I have been very careful with the imports, only importing from the Grid subpath and not from the main htmlelements entry point.  I do not want to include entire framework of html.smart, only the portion required for grid.  I have made sure my imports look like this:

import {
GridAppearance,
GridBehavior,
GridColumn,
GridEditing,
GridFiltering,
GridPager,
GridPaging,
GridSelection,
GridSorting,
Scrolling,
} from ‘smart-webcomponents/source/typescript/smart.grid’;
import ‘smart-webcomponents/source/components/smart.ui.grid.js’;

• This topic was modified 2 years, 1 month ago by Hugh Anderson. Reason: to include extra info about imports
• This topic was modified 2 years, 1 month ago by Hugh Anderson.
• This topic was modified 2 years, 1 month ago by Hugh Anderson.

[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/

[Author]

Posts