Problem I'm trying to solve:
I have multiple bundled JS files: head.js, footer.js, some-other-page.js
If I had these all in a single file I could easily check for dead code and strip it
I'd like to be able to still strip the site-wide dead code from each smaller bundle.
Willing to re-work my build to do this. Any ideas?
A good way to check about dead-code is by having unit-tests to your project and then check the code coverage and see which part was never used. For more about code coverage you can see: https://www.jetbrains.com/webstorm/help/monitoring-code-coverage-for-javascript.html
This will maybe need re-work of your code as well if you are not using unit-tests but it is a very good way to analyse your code for code coverage and see that some parts are never used (hence remove them from your code)
Also for code that it is not yours (e.g. for jQuery) you can use a grunt build to remove the functions/methods that you are not using. A very interesting article of how to do that is this: http://developer.telerik.com/featured/trimming-jquery-grunt . For example if you are not using the ajax from jQuery you can simply do this: grunt custom:-ajax. Known libraries has this functionality so you can build it on the go.
Well,
Good Idea but for understanding purpose it's good to keep it seperate but if you want to combine then use switch
Related
I'm building a project in javascript, using paper.js in some features.
Most of my project is built in vanilla Javascript, just some minimum but important features are built with paper.js
The problem is that the library (.min library) is 200kb.
The normal library is 300kb, I was wondering if there is an automatic way to see which functions are being used in the main paper.js library, in order to delete the useless functions.
If there is no program or automatic way to do this, maybe some advice of how to do it manually, or which tools you recommend for me and my team in order to delete useless functions, then minify the file and run it smaller.
Thank you all guys, I did not added any specific code because I want this anwser to be global.
Greetings
You have to do it manually but it's not an easy (and certainly not quick) process. You'll have to find which functions you're using and then find whatever classes or functions those functions reference. You would probably have an easier time creating a new script then copy/pasting what you're using (and any referenced content) then running it with your script, log errors, and repeat.
When you're done there's many minify libraries and services online you can use to minify the new script.
I used the paper-core version and then minified.
I saved 140kb by doing this.
There's still no way to see useless functions in this library
I am currently working on a web page development. I have used downloaded one external javascript file from CanvasJs and I am using it locally to add some dynamic functionality to a graph in my page. I am using only a small functionality from the file. How do i remove the dead line that I don't use? I don't know which lines are not being used!
Note: I am using the script file to draw a spline chart, but the script file contains code for many more graphs and functionalities. How do I remove those redundant functionalities. The script file is too big with all the functions that I don't use. I wish to reduce the file size by removing the redundant line of codes.
If you are certain that you want to remove all but the code that your application calls:
Find all of the functions that your code calls in the library.
Copy each of these functions into a new file.
In each of these functions, find all functions and any global variables that they reference and return to point 2.
When you have all of the referenced functions and variables in a separate file, try your code out on it in as many different ways as you can think of to make sure that you did not miss anything out.
Do this on the un-minified version of the library and then minify the resulting code, so that it is readable for you.
Another way of stepping through the code is to use the debugger built in to your browser, by setting a breakpoint on your own code and stepping through it, then finding that code in the library file.
If you think that you might need more functionality from the library however, weigh the cost over the wire against the effort of extracting only the required code. It might be best to use the full library or to find another more specialised library if possible.
My front end is an Angular 1.x project with tons of files. I basically need to validate it and find any errors that are there in any of the files. Specifically, errors that can break the page. In compiled/static type languages like Java, this is very easy, as the compiler will tell you exactly what's wrong. However, since JS is interpreted/dynamically typed, I can't figure out a way to "build" these files and find errors like I would for compiled languages. Going to every single page in the browser after I make any change is neither practical nor scalable.
I am also not using TypeScript or ES6 and it's not possible at the moment to migrate to any of them. Tools like ESLint and JSHint have also not been very successful, since they only bring out minor errors within that file. However, a lot of major code is spread over several files. Although my code is already all ES5, I thought about concatenating all JS files together in one file and running babel on it. But have it been sure how to manage dependencies during the concatenation (such as in what order to concatenate files).
This cant be the only project that uses vanilla JS and needs to be validated for errors. Anyone has any ideas on how I should go about accomplishing the task?
I highly recommend writing tests using jasmine and karma. I've found the two of these integrate really well with Angular and test driven development is highly regarded as one of the best development styles.
With all of this being said, I understand that's not what you're looking for directly because you want more of a "compiler" like solution. The closest thing that you can get to this in JS in my opinion is a linter and when combined with tests, this solution is rather good at finding errors in JS code.
Well I had lots of scripts so what I did is that I combined all of them into one script file, which contains files like Jquery library too.
But now the problem is that it has stopped working, I don't know why did this happen.
What I did is that I took every script copied and pasted it and then I gave some space under it by pressing enter a few times and then I used to paste other script, I was told this was the method to combine scripts but now the scripts don't work.
Here is the link to combined scripts http://files.cryoffalcon.com/bloghuts/uncompressed/BlogHuts%20UNCOMPRESSED.js
And the link to a live example is http://bloghutsbeta.blogspot.com/
ANSWER/SOLUTION:
Earlier I was using an older version of Jquery I think 1.5 now I changed it to latest 1.7 and that was the reason that everything stopped working. It had nothing to do with combination. I am using all scripts combined and everything is working fine But why is older version better than New that is a new question for me
First, I'd suggest you move the jquery library links out to the main page. Have one file for all of your javascript, and include the other stuff on separate lines.
Whether or not you do that, though, your problem is almost certainly some sort of unclosed bracket or semicolon missing or something similar. Javascript often reacts to stuf like that by throwing its hands up in the air and giving up. The way to fix it is to go through your file and pick a function that is not currently working, but that is easy to test for functionality. Then comment out everything else, and test to see if the function works. If not, fix the function until it does work. Then, one piece at a time, uncomment each of the other blocks, again testing to see if the initial function works. If uncommenting a block causes the thing to stop working, then that's the block that you need to fix. Depending on how long your blocks are, you may need to do this in tiers
First, don't do that with jQuery, ever. You're almost always better off pointing your script src to a public CDN somewhere.
Second, what you're trying to do is very brittle, and probably not worth troubleshooting. If you have that many JS files, you really need to use a module library (I like require.js) to give your project some structure and make it more manageable. Most libraries like this will include some sort of utility to combine and minifi your scripts safely.
This will take some work on your part to get things setup, but it should prove well worth it in the long run!
I did find a very interesting tool for identify unused css definitions in a web project.
http://www.sitepoint.com/dustmeselectors/
Are there similar tools also for javascript projects?
P.S.
I know there is no program for deterministically finding unused code. But I am looking for a report to identify possible unused code. Then the last decision will always be your own.
Problem is there is no way to be really sure. Suppose the following:
The initial HTML site is practically empty. There is a lot of JS code though, which seems to be unused.
OnLoad, a function is called which launches an AJAX query to the server. The server returns a lot of HTML code, which is the body of the site. This body contains lots of JavaScript functions.
The initial body is replaced with the body received via AJAX. Suddenly, all code is used.
Static analysis utilities are therefore useless. I do not know whether there exists a browser extension that marks all JS usage from a running browser though.
You can try using tombstones to safely locate and remove dead code from your JavaScript.
https://blog.bugsnag.com/javascript-refactoring-with-bugsnag-and-tombstones/
In order to find the unused assets, to remove manually, you can use deadfile library:
https://m-izadmehr.github.io/deadfile/
It can simply find unused files, in any JS project.
Without any config, it supports ES6, JSX, and Vue files:
The one that comes to mind most quickly is Javascript LINT (http://www.javascriptlint.com/) and JSLint (http://www.jslint.com/).
Beware though: the latter hurts your feelings.