Skip to content
<hrc />

Minimizing bundle size

The following packages exports multiple components:

The default entry point for the previous packages includes CSS for all of its component. You have two options to reduce the bundle size:

Option 1: Use path imports

import { Button, ButtonIcon } from "@hrc/button";
import { Input, Checkbox } from "@hrc/input";
import { Button } from "@hrc/button/dist/Button";
import { ButtonIcon } from "@hrc/button/dist/ButtonIcon";
import { Input } from "@hrc/input/dist/Input";
import { Checkbox } from "@hrc/input/dist/Checkbox";

Option 2: Use vite-plugin-hrc-import

  1. Install vite-plugin-hrc-import:

    Terminal window
    npm install -D vite-plugin-hrc-import

  2. Write the following code in your vite.config.js file:

    import hrcImportPlugin from "vite-plugin-hrc-import";
    

    export default defineConfig({
      plugins: [hrcImportPlugin()],
    });

Option 3: Use @hrc/babel-config

  1. Setup babel in your project.

  2. Install @hrc/babel-config and babel-plugin-import:

    Terminal window
    npm install -D @hrc/babel-config babel-plugin-import

  3. Create a .babelrc.js in the root directory of your project and write the following:

    import hrcConfig from "@hrc/babel-config";
    

    const plugins = [
      ...otherPlugins,
      ...hrcConfig(["button", "input"])
    ];
    

    module.exports = { plugins };