CODEWITHSUNDEEP
javascripthtmlcss
user666
user666

Reputation: 318

How to reduce a unuse css file?

I am using bootstrap to build a mobile web page

only one page and use some of the bootstrap css and js code but I have to hold all the css and js.

since I only use some of it I want to reduce the unused css style and js code to reduce the file size

how to do it?

I mean if I only use the modal of the bootstrap how to reduce the css of col and alert and other css I do not used?

Upvotes: 2

Views: 1761

Answers (3)

Ankur Parihar
Ankur Parihar

Reputation: 495

Chrome DevTools has coverage tool. It identifies which code is useful and which is not. I used it to reduce my css file from ~25K lines to ~2.3k lines.

Read more here: https://developers.google.com/web/tools/chrome-devtools/coverage

Upvotes: 0

HasH
HasH

Reputation: 948

Remove Unused CSS from the Stylesheet Here’s how you can easily find all the unused selectors in your CSS files in Google Chrome:

Open any page of your website inside Google Chrome and then launch the Dev Tools available under File -> Tools -> Developers Tools. Click the Audits tab inside Dev Tools and select the “Web Page Performance” and “Reload Page and Audit on Load” options. Now click the “Run” button to begin the CSS audit process. On the results page, expand the “Remove Unused CSS Rules” group and select the CSS file(s) that are linked from your site. You may ignore the CSS files added by social plugins and widgets since you do not have control over them. Here you will get a sorted list of all styles that are defined in the CSS file but not used anywhere on the current page.

You can copy and save the results in a text file and repeat the steps for couple of other pages on your site. This is essential as not all selectors may be used on all pages. You can find the count of various selectors in the combined resultset, maybe using Google Sheets, and the selectors with the highest count can probably be “safely” removed.

read more this link

Upvotes: 0

Aleksandar Misich
Aleksandar Misich

Reputation: 487

I'm not fully sure if this question really belongs here, but there is an answer to the question.

You can use Bootstrap's site to customize which elements of bootstrap you want and do not want, downloading a file with only the bits that you would like to keep.

This is available here: https://getbootstrap.com/docs/3.4/customize/

Upvotes: 2

Related Questions