Npm minify js file3/17/2024 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 |