search

elastic / eui

Elastic UI Framework 🙌
https://eui.elastic.co/
Other
6.08k stars 829 forks source link

Large Build Size Despite Importing Specific Files #8035

Open Chetan11-dev opened 4 days ago

Chetan11-dev commented 4 days ago

Hi, first of all, thank you for creating Elastic UI! I’ve used it in my popular library Botasaurus, and my users absolutely love it.

I have a question regarding the build size. Although I'm importing only the specific modules I need, the final build is still quite large. Here’s a list of the modules I’m importing:

import { EuiProvider } from '@elastic/eui/optimize/es/components/provider/provider';
import { EuiButton } from "@elastic/eui/optimize/es/components/button/button";
import { EuiCodeBlock } from "@elastic/eui/optimize/es/components/code/code_block";
import { EuiDescriptionListDescription } from "@elastic/eui/optimize/es/components/description_list/description_list_description";
import { EuiEmptyPrompt } from "@elastic/eui/optimize/es/components/empty_prompt/empty_prompt";
import { EuiLink } from "@elastic/eui/optimize/es/components/link/link";
import { EuiImage } from "@elastic/eui/optimize/es/components/image/image";
import { EuiButtonEmpty } from "@elastic/eui/optimize/es/components/button/button_empty/button_empty";
import { EuiForm } from "@elastic/eui/optimize/es/components/form/form";
import { EuiFormRow } from "@elastic/eui/optimize/es/components/form/form_row/form_row";
import { EuiIcon } from "@elastic/eui/optimize/es/components/icon/icon";
import { EuiToolTip } from "@elastic/eui/optimize/es/components/tool_tip/tool_tip";
import { EuiButtonIcon } from "@elastic/eui/optimize/es/components/button/button_icon/button_icon";
import { EuiFieldText } from "@elastic/eui/optimize/es/components/form/field_text/field_text";
import { EuiFlexGroup } from "@elastic/eui/optimize/es/components/flex/flex_group";
import { EuiFlexItem } from "@elastic/eui/optimize/es/components/flex/flex_item";
import { EuiModal } from "@elastic/eui/optimize/es/components/modal/modal";
import { EuiModalBody } from "@elastic/eui/optimize/es/components/modal/modal_body";
import { EuiModalFooter } from "@elastic/eui/optimize/es/components/modal/modal_footer";
import { EuiModalHeader } from "@elastic/eui/optimize/es/components/modal/modal_header";
import { EuiModalHeaderTitle } from "@elastic/eui/optimize/es/components/modal/modal_header_title";
import { useState } from "react";
import { EuiBadge } from "@elastic/eui/optimize/es/components/badge/badge";
import { EuiBasicTable } from "@elastic/eui/optimize/es/components/basic_table/basic_table";
import { EuiBasicTableColumn } from "@elastic/eui/optimize/es/components/basic_table/basic_table";
import { EuiLink } from "@elastic/eui/optimize/es/components/link";
import { EuiText } from "@elastic/eui/optimize/es/components/text/text";
import { formatDate } from "@elastic/eui/optimize/es/services/format/format_date";
import { EuiCollapsibleNav } from "@elastic/eui/optimize/es/components/collapsible_nav/collapsible_nav";
import { EuiCollapsibleNavGroup } from "@elastic/eui/optimize/es/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group";
import { EuiHeader } from "@elastic/eui/optimize/es/components/header/header";
import { EuiHeaderLink } from "@elastic/eui/optimize/es/components/header/header_links/header_link";
import { EuiHeaderSectionItemButton } from "@elastic/eui/optimize/es/components/header/header_section/header_section_item_button";
import { EuiListGroup } from "@elastic/eui/optimize/es/components/list_group/list_group";
import { EuiListGroupItem } from "@elastic/eui/optimize/es/components/list_group/list_group_item";
import { EuiTitle } from "@elastic/eui/optimize/es/components/title/title";
import { useGeneratedHtmlId } from "@elastic/eui/optimize/es/services/accessibility/html_id_generator";

Despite importing just these specific components, the build size remains large. Image

My questions are:

  1. Is this a normal behavior for Elastic UI? Is there any unused code being bundled in the build (for example, I've noticed that @hello/pangea is bundled, even though I’m not using any drag-and-drop functionality)?
  2. Is there anything I can do to reduce the build size?

Thanks again for your help! I really appreciate the contribution you’ve made to the developer community with Elastic UI—keep up the great work!

JasonStoltz commented 1 day ago

Hey @Chetan11-dev, the short answer is that this library hasn't really been optimized to work well with treeshaking, so unfortunately, I believe the build size is static regardless of what code you're using.

I wish I had a better answer for you! At this point it's a known issue and something we'd love to solve at some point. But currently, this is not a priority for us.

Chetan11-dev commented 1 day ago

Thanks, for replying, EUI is awesome, has been a Great Great Contributor in my both my website and open source project. Keep up the good work.

JasonStoltz commented 1 day ago

Thank you for the kind words! ❤