Creating minified js files a frame3/17/2024 So how do you use whitespaces, comments, and other things you need for a good development experience but still deliver minified files for production? The idea is to have a development and production version of your code. These things can improve the general performance and response time of your web applications. So, minifying your JavaScript files improves initial parse time. The smaller the size, the less time the parser will take. The larger the file size, the more time it will take to parse the file. If it is, then the code is translated to machine code that can be understood by the browser. Parsing involves going through the code line by line, explicitly ignoring whitespaces and comments, and checking if the code is syntactically correct. When the browser fetches a JavaScript file, the JavaScript engine first tries to parse the file. Smaller file size improves initial parse time And the smaller the file size, the faster the download completes.īy minifying your JavaScript files, you can improve resource load times as the browser will require less time to completely download such files. The larger the file size, the longer the download (fetching) takes to complete. You cannot control the internet connection that users of your web applications may have, but you can control the sizes of your files. Two things that can make the process of receiving the requested resources slow are: With everything fetched correctly, you see a page on your browser with elements styled and interactions (done with JavaScript) working. html file, which in turn fetches the linked stylesheet and script files. When you go to a URL on your browser, the browser fetches the resources stored on the server for that URL. The minified code produces the same execution result as the original, only that the minified one is compressed, and will have a smaller file size. With minification, the unnecessary whitespaces and the comments get removed. What happens then is that if you have a lot of comments/whitespaces in your code, it could make the file size unnecessarily large. But they're for us as developers, not your browser. These things make code easier to read, and help us remember why we made certain decisions. Spacing and commenting out our code are things we do as developers to improve our development experience. It also doesn't need comments for its execution. The interpreter for executing JavaScript code does not need whitespaces (spaces, line breaks, and so on). Of course, this is quite insignificant here – but in large codebases such as the image below, the difference would be obvious: Screenshot gotten from StackOverflow The JavaScript Interpreter Doesn't Need Whitespaces and Comments The size of the first version on my computer is 100 bytes, while the second is 75 bytes. So the first version is good for development while the second version is fit for production (you'll understand this as you continue reading). The difference is that the first version is easily readable, while the second version isn't. In our code above, you can see the semi-colons at the end of some lines to show where the statement ends.Ī "minified" version of the JavaScript code above would look like this: const variable="Variable" function print() print() īoth versions will produce the same results. This helps the interpreter differentiate between statements. In JavaScript, we know that a semi-colon is used to end a statement. Here we have the variable declaration, the print declaration, and the print() execution. Take a look at the following JavaScript code: const variable = "Variable" Minification is the process of "minimizing" code by removing the irrelevant parts of the code. You might be wondering – what is minification and how does it improve your JavaScript applications? What tools can you use to minify your JS? I'll answer these questions in this article.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |