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.
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
Working on a project for my internship, after a basic proof of concept I am now trying to get a nodeJS program that can call in functions from a .js file linked to a company intranet website and execute them.
I'm running into an issue with having nodeJS read the .js file/call in the proper functions while also ensuring that the front end/html still runs as intended. The .js file includes lines of jquery which nodeJS requires the use of something like
var $ = require('jquery');
in order for it to run. However, if I include this line (or, after some checking, ANY require('') statement, even if the variable assigned to the require is unused) in the .js, it causes some sort of break in the normal operations so that the front-end html site no longer displays/queries data properly.
Unfortunately I don't have a minimum code example to show so mainly looking to spitball ideas from anyone on if they've had similar problems. Possible solution would be to have a separate .js file with all the same functionality but re-written/adjusted to work for nodeJS, but we want to avoid that if possible
I'm using babylon.js as a framework for easy access to WebGL. Unfortunetaly, I'm struggling a bit with managing my code.
For example, I want to create a mesh in a js-file, then I want to edit its position in another js-file.
So what I need is that the index-file loads all javascript-files like their code was written as one large block in the index file.
Using jQuerys getScript for example runs the other js-File, but does not implement it into the code like it was one file.
EDIT: using the php-include it works how it should. Just for understanding: The server is creating the output in this case, doesn't it?
Looking forward answers!
Browser interprets JS files as it receives them. In case of jQuery, requireJS or other loaders new tag is added to the page, so browser loads a new file, and processes it as a new file.
The only way to achieve what you want is to make server compile different files together and give it to browser as one file. This is what PHP does, this is what any other compiler is for (like Grunt).
On a large scale though, it may be a bad idea to write code in different files such as it works differently whether it's loaded as is or compiled to one file. It can be a major pain to support that code later on.
We are developing a javascript component to be used in a JSF app and we're using Dojo.
The thing is we only need specific parts of the library and we'd like to only insert into our webapp the files/folders we use to accomplish our goal.
We could do this 'by hand' but in the future we might need to add other functionality from Dojo and then we will not know what resources we need -> I guess by this moment you realised we are no Dojo/js gurus.
Basically we are looking for a way to automate this process. We were thinking of getting a list of the dependencies and then create a small script to 'filter' the files.
Is this possible ? Have anyone tried this before ?
Thanks.
I may be misinterpreting your request, but I think dojo does what you want out of the box. Since the latest versions of dojo follow the Asynchronous Module Definition (AMD) format, you use a global require function to describe what dependencies a specific block of code have, and only those modules are loaded. An example from the sitepen dojo intro:
require(["dojo/dom", "dojo/domReady!"], function(dom){
var greeting = dom.byId("greeting");
greeting.innerHTML += " from Dojo!";
});
If you only want to have to to load a single <script/> tag, you'll want to look into the dojo builder. Using the online build tool You can select what packages you want included into the dojo.js layer and it will bundle everything up into a zip file that includes dojo.js/dojo.js.uncompressed.js which contains dojo core in addition to the modules you selected.
Ok, we did this by doing the following (just in case anyone will need this):
* declare a JSF filter and map it to /js/* (all dojo resources are under /js folder, this may need to be modified to fit your folder structure); this way, all requests for a dojo resource will be filtered.
* in the filter class, get all the requested files: (HttpServletRequest) request).getRequestURI() and write it line by line in a file: now you have all the needed resources.
* parse that file with a script, line by line, and copy the files to another location -> build the folder structure.
* use the created files in your WebContent folder (or wherever you need it), you have a clean library -> you only deploy what you use.
The web is littered with full-blown JavaScript libraries who say they will save your day and make your web development life much easier. You get encouraged to include these “mere 80 kb” libraries that is supposed to be the solution to all your needs, and practically make the web site work by itself. Needless to say, I’m not a big follower of JavaScript libraries,, especially since they almost always include lots of superfluous code, so I thought I’d put together a tiny library with only essential JavaScript functions.
The result of that is EJ – Essential JavaScript.
EJ consists of functions that I use all the time and they make writing JavaScript go faster and the result is being able to do work more efficiently. It is also about having the things you would write again and again for every web site you produce in one neat and tiny file instead, to be able to focus on the new things you need to address
I'm very new to the JavaScript library world. I have used JS by itself before to create a mini social network but this is the first time I use a JS library and I really don't know how to go about this.
I'm planning to use Google Closure and I'm really not sure how I should go about organizing the code. Should I put everything in one file since it's a web app and should have one screen? Should I separate the code to many chunks and put them in different files? Or should I put different dialogs (like settings) in a separate page and thus a separate file?
Like all programmers I'm a perfectionist so please help me out with this one, thanks.
If you're using Closure, you can use the closure compiler. I'd recommend multiple js files that are compiled into a single resource by the compiler. You'd reference that single js file in your html, so you wouldn't have to link to all of them.
Then, since you have multiple JS file, you can organize them in a logical way that will help you separate logic from UI from communications, etc. Also, if you're writing unit tests (JsUnit) it will be easier to write one test file per js file.
Depends...
What I do is add all my code in one file(librarys are always in different files) and then even though some of it wont be used, there will be no need to add multiple scripts to the page. If you have 20 files with script, it can be very confusing knowing which one to use.