How to Remove Unused javascript From Website [closed]

Question

I'm trying to speed up my website. I used www.unused-css.com/ to trim away excess CSS, but I cannot find anything similar for JavaScript. Is there an online service that can detect the js code being used and then trim away the unused code?

Here is the website with the problem: IQ Tests for Kids I'm using bootstrap code and it is very bloated. I'm sure that I'm only using a fraction of js because I trimmed down my HTML as well.

Answer 1

The best you are going to get is running the JavaScript itself through a dead code removal process, such as the one provided by the Google Closure Compiler with ADVANCED_OPTIMIZATIONS enabled or Uglify's dead_code option. Some people even combine both of these.

Tree shaking is an even better process you will hear people talk about. But this is more difficult to achieve in your case, because tree shaking involves using ES6 modules, which the code you are dealing with almost certainly is not. Thus it would be a lot of work to get that going, as you would have to modify the code.

Answer 2

Don't know any online tool for that, but there are techniques to do what is called "tree shaking". You can google about it more.

Best my used tools to have it working are webpack and Flow

Webpack is quite general tool to make all kind of magic with JS, while Flow is type checking tool which, if you have type checking active can provide very good tree shaking.

But as you mentioned, you are using Bootstrap, so best place to start looking at would be customize your build:

http://getbootstrap.com/customize/