Identification and removal of unwanted CSS (files / styles) and JS (scripts / functions) from a domain browsing session

Question

We have a very large project using twitter bootstrap templates and third-party jQuery plugins, the original developer added several plugins and CSS files, without worrying about the functions and functions that he will use.

As some of these styles and JS functions can be called dynamically, and since the project is very large, manual checks are very tedious work, so you know about any tools that can profile the use of CSS and JS functions for a browsing session (suggests that the session Viewer covers all pages and functions of js and clicks) and report unused ones, so that developers can safely delete them at the assembly stage in production, in order to keep the payload to a minimum?

The above steps are valid for any site, not just those that use jQuery bootstrap templates and plugins.

Answer 1

I know that with Chrome Audits you can check what percentage of your CSS files are used, which will help reduce it; only for certain pages.

Sometimes the best way to do the cleanup is simply to choose a design (functions / styles, etc.) and leave everything else, it can disrupt the functionality and appearance of the system, and it can be tedious, but at least you know work is done just then.

Some of you may probably disagree, but that would be the way I would do this work.

Answer 2

I'm not sure I fully understand your questions here, but Chrome and Firefox have very good profiling tools (Developer Tools, FireBug respectively) that will provide you with a very good overview of the code used and ECMAscript + performance methods.

If you ask how to delete stylesheets and / or Javascript dynamically during a session, this is very simple. This is not a problem for removing CSS / styles (they will be deleted from memory and will lose any link to the site). The problem starts with Javascript, there is no way to remove / unload once loaded Javascript code dynamically. Of course, you can delete the <script> element, but the code will remain in memory and in reality forever.