DevExtreme Angular - Tree Shaking

Tree Shaking

The tree shaking mechanism removes unused portions of source and library code to reduce the downloaded size of the application.

The tree shaking mechanism checks whether you import only the modules used in your application. For instance, the following import takes the DxButtonModule from the devextreme-angular module:

import { DxButtonModule } from 'devextreme-angular';

If tree shaking is not configured in your application, import exports from specific modules instead of the main devextreme-angular module to reduce the bundle size:

import { DxButtonModule } from 'devextreme-angular/ui/button';

Bundle Size

DevExtreme code consists of three main code groups: - Utilities Code An application imports Utilities Code, when you add a DevExtreme component. Utilities Code is mandatory for DevExtreme components and the tree shaking mechanim does not remove this code.

• Data Visualization Components Code The bundle includes the Data Visualization components code if you use the Chart component in your application. The Data Visualization components code has a large file size and may affect the resulting bundle.

• UI Components Code The size of the UI Components Code depends on components that you use in your application. For example, you can import a simple component (such as Button) and the resulting bundle will contain only this component code. Complex components (such as DataGrid, Scheduler, or PivotGrid) include multiple simple components. If you import DataGrid to your application, the bundle includes code of the ScrollView, Button, TextBox, Form, and other components .

To summarize, the tree shaking mechanism does not affect the resulting bundle if you use a complex UI and Data Visualization in the application. However, if you use simple components, the tree shaking mechanism will remove unnecessary code from the production bundle. Refer to the following Github issue for more details about bundle size in DevExtreme Angular applications: Large Bundle Size - Angular.

The table below contains information about the size of common modules after you import them to the application: