Remove unused modules/components from Semantic UI build

Question

after searching for a long time, I didn't find any solution that fits to current Semantic UI 2.0.

Question is: How to I remove unused components and modules from my JS/CSS build? Im using about 1/4 of all features, is there any easy way to reduce the file size? The way to add/remove items from semantic.json doesn't work anymore it seems.

Thanks, H.G.

Answer 1

This can be done during Semantic UI's installation process. Have you read Install Semantic UI?

There is depicted that you shall execute

npm install semantic-ui --save

to start the install script.

You will be asked which type of setup you want to run through (Automatic, Express, Custom). If you choose "Custom", you will be prompted which components to install Semantic UI with.

Of course, this means you'll have to know beforehand, which components you'll make use of, during your development. I chose the way to install Semantic UI completely, and re-run the installation process again, now stripping down the components to install, once the project is ready for release.

Kind regards, Sascha.

Answer 2

Here is how to customize the components:

• Edit the semantic.json file to fine tune the component list. If you have selected the default installation which installs all components, there won't be the components section in this json file, while you are free to append it manually.

• Go the the semantic directory (which is project_root/semantic by default), and run two gulp commands:

  1. gulp clean
  2. gulp build

Then semantic would be rebuilt with your latest component list. Below is an example for reference:

    {
      "base": "semantic/",
      "paths": {
        "source": {
          "config": "src/theme.config",
          "definitions": "src/definitions/",
          "site": "src/site/",
          "themes": "src/themes/"
        },
        "output": {
          "packaged": "dist/",
          "uncompressed": "dist/components/",
          "compressed": "dist/components/",
          "themes": "dist/themes/"
        },
        "clean": "dist/"
      },
      "permission": false,
      "autoInstall": false,
      "rtl": false,
      "components": [
        "reset",
        "site",
        "button",
        "container",
        "divider",
        "header",
        "icon",
        "image",
        "input",
        "label",
        "segment",
        "form",
        "grid",
        "menu",
        "message",
        "dropdown",
        "transition"
      ],
      "version": "2.2.4"
    }