Optimize your bundle size

Because @tsed/react-formio provides multiple exports and a mechanism to register your own components, you can reduce the bundle size by importing only the components you need.

But you have to create your own imports file to import only the components you need.

The first step is to create a registers.ts file:

import "@tsed/react-formio/atoms/icon/Icon";
import "@tsed/react-formio/molecules/tabs/Tab";
import "@tsed/react-formio/molecules/tabs/TabList";
import "@tsed/react-formio/molecules/tabs/TabPanel";
import "@tsed/react-formio/molecules/tabs/Tabs";
import "@tsed/react-formio/molecules/tabs/TabsBody";
import "@tsed/react-formio/molecules/button/Button";
import "@tsed/react-formio/molecules/forms/input-text/InputText";
import "@tsed/react-formio/molecules/forms/select/Select";
import "@tsed/react-formio/molecules/forms/select/components/HtmlSelect";
import "@tsed/react-formio/molecules/forms/select/components/ChoicesSelect";
import "@tsed/react-formio/molecules/forms/select/components/ReactSelect";
import "@tsed/react-formio/molecules/forms/input-tags/InputTags";
import "@tsed/react-formio/molecules/forms/input-tags/components/ReactTags";
import "@tsed/react-formio/molecules/forms/input-tags/components/ChoicesTags";
import "@tsed/react-formio/molecules/pagination/Pagination";
import "@tsed/react-formio/molecules/pagination/PaginationButton";
import "@tsed/react-formio/organisms/form/builder/FormBuilder";
import "@tsed/react-formio/organisms/form/builder/FormEdit";
import "@tsed/react-formio/organisms/form/builder/FormEditCtas";
import "@tsed/react-formio/organisms/form/builder/FormParameters";
import "@tsed/react-formio/organisms/form/builder/useFormBuilder";
import "@tsed/react-formio/organisms/form/builder/useFormEdit";
import "@tsed/react-formio/molecules/forms/input-tags/InputTags.interface";
import "@tsed/react-formio/molecules/table/components/DefaultFilter";
import "@tsed/react-formio/molecules/table/components/DefaultArrowSort";
import "@tsed/react-formio/molecules/table/components/DefaultCell";
import "@tsed/react-formio/molecules/table/components/DefaultCellOperations";
import "@tsed/react-formio/molecules/table/components/DefaultOperationButton";
import "@tsed/react-formio/molecules/table/components/DefaultCellHeader";
import "@tsed/react-formio/molecules/table/components/DefaultCellFooter";
import "@tsed/react-formio/molecules/table/filters/TextFieldFilter";
import "@tsed/react-formio/molecules/table/filters/SelectFilter";
import "@tsed/react-formio/molecules/table/filters/RangeFilter";

Comment lines you don't need and add your own component if necessary.

This file references all the components used by the library, you can remove the components you don't need or replace them by your own component.

Then you can import only the components you need in your application:

import React from "react";
// import "@tsed/react-formio/all"; // remove or comment this line
import "./registers.ts"; // import your own registers file
import { FormBuilder } from "@tsed/react-formio/organisms/form/builder/FormBuilder";

function App() {
  return (
    <div className='App'>
      <FormBuilder display={"form"} components={[/**/]} />
    </div>
  );
}

export default App;