![]() #MINIFY JS FILE CODE#Let's say, for example, that you have a chunk of JavaScript code that you're going to be using on several different pages on your website. One benefit of externalizing and minifying your JavaScript is that it allows you to handle caching a little bit better. Benefits of Externalizing and Minifying JavaScript And when you've got a high traffic website, that is really going to help out a lot. This is just a very small chunk of JavaScript here, so you can imagine that if you had a lot of JavaScript on your page, this would really save you a lot of file size. If for some reason you just like using notepad to do all of your code editing, you can still minify, and one way you can do that is by going to a website like JSCompress.īasically, this just allows you to paste your code and then click on the Compress JavaScript button, and you'll see that this compressed our code by 74%. Otherwise, all that minification is pointless JSCompress And so in your HTML, you would want to point to that minified version instead of the original version of your code. So if you minified site.js, then you would have a new version probably called. Keep in mind that after you minify your code, you need to change the file that you're pointing to in the HTML file. ![]() ![]() So if you go to the extension manager for Brackets and do a search for "minify", you'll see a JavaScript minifier. #MINIFY JS FILE FREE#Brackets PluginsĪnother free online text editor called Brackets also has extensions you can use to minify code. If we go to our extensions and just do a search for "minify", you can see several options for minifying your code. For example, I am using Visual Studio Code. Most modern code editors have plugins that will minify your JavaScript for you. Now, how do you minify? There are several options. That's why you save the original copy of your JavaScript so that if you need to make changes, you make changes to that original JavaScript file, and then minify it again. It's going to be difficult to read or edit that minified file. ![]() And when you have a minified version of your code, that minified version's going to run much quicker, because it's going to be a smaller file size. One of the big benefits of having your JavaScript in a separate file is that you can then very easily minimize or minify that JavaScript code. That's really all it takes to externalize your JavaScript. So it's in our JavaScript folder js/ and then I called it site.js, so the code is: And then, after we've loaded all our dependencies, we'll create our own script tag to load the file that we just created. ![]() Now it's not going to work just yet because we're not pointing to this JavaScript in our HTML file yet.īut we can jump back over to our index.html. But I'm saving it as site.js, and I'll just paste all of that JavaScript code into it. I'm using Visual Studio code here, but you could also use brackets or any other plain text editor. It doesn't matter what text editor you're using. So I simply highlight everything inside the script tags and cut it.Īnd then we can get rid of the script tags altogether by highlighting and deleting them.Īnd then I'm going to create a new JavaScript file inside my JavaScript folder and just call it site.js. I have an index.html file with JavaScript code inside it. js extension. Then you would simply use a script tag to point to that file. You would just take everything inside the script tags, remove it, and then create a new text file with a. When we talk about externalizing our code, what I'm talking about is taking all of our JavaScript out of our HTML pages and putting that JavaScript into a separate JavaScript file, a. A great way to increase the efficiency of our code is by externalizing and minimizing our code. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |