Geek Answers Handbook

Removing Unused Modules / Components from the Semantic UI Assembly

after a long search, I did not find a solution that is suitable for the current semantic interface 2.0.

Question: how to remove unused components and modules from my JS / CSS assembly? I use about 1/4 of all functions, is there an easy way to reduce the file size? The way to add / remove elements from semantic.json no longer works.

Thanks HG

+5
source share
2 answers

This can be done during the installation of the semantic interface. Have you read Install semantic interface ?

It will be shown that you must complete

npm install semantic-ui --save

to start the installation of the script.

You will be asked what type of setup you want to run (automatic, express, custom). If you select Custom, you will be prompted to install components for the semantic interface using.

Of course, this means that you will need to know in advance which components you will use during development. I chose a way to fully install the Semantic UI and restart the installation process again, now disabling the components for installation as soon as the project is ready for release.

Regards, Sascha.

+5
source

Here's how to configure the components:

  • Edit the semantic.json file to fine tune the list of components. If you selected a default installation that installs all components, there will be no component section in this json file, but you can add it manually.

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

    • gulp clean
    • gulp build

Then the semantics will be rebuilt with your last list of components. The following is an example link:

  { "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" }
+2
source

More articles:


All Articles