Hello guys, Today we will be talking about enhancing (optimizing) you website using Build tools. I was thinking of writing a full in depth series of articles on "How to create a JavaScript Development Environment"
Prerequesite
- web technologies fundamental knowledge (HTML, CSS, Javscript)
- willingness to learn
what you will learn after this article
- What is a build tool
- how to choose the right build tool for you
- how to increase performance of you website
what are the ways s to improve Performance
As you know there are several ways to improve performance of you codes and website but i will be talking about few common ones that you need to start using Immediately. Please note that this is a simple explanation for these terms and each of them is a topic of its own.
- Linting
Linting is Simply creating a set of rule to guide how you write code. ESlint is a popular linting tools for JavaScript. Linting increase performance because it ensure you follow best practice guild line and prevent you from leaving unused variables and long comments. For more details check out Traversy Media course on Linting
- Building
Building involves create a compiled version of your code to optimise and reduce the download size of the code. Best Build tools for JS are Parcel and webpack
Transpiling
Transpiling is converting new Es6+ code to older versions so that older browsers will easily understand
Caching
Temporal Storage of chunks of code or files on the browser to prevent and reduces download size of subsequent reloads
Polyfills
Some browser do not have latest feature of CSS3 and HTML5 . Polyfills are CDNs that provide you with those features as much as they can. Checkout This Article to know more
making use of Sprites
To prevent multiple rounds of fetching images, you can put in a single image file so that it downloads only once and you can access individual icons by their (x, y ) coordinate on the larger image. For more explanation click Here
What are the Features of Build tools
Bundling
Bundling is simple combining multi similar files into one single file. It is like when u have two or more javascript files and then you take all the code from the three files and write all of them in one single file
Code-Spliting
After Bundling very large files , the single file may become too large , thereby making it heavy for a user to download in quickly. You make you of code splitting to divide this main file into chucks of smaller files, so that they user can download in chunks. Think of it like dividing a 3hrs video in to chunks of 30 mins so that the user will at least get the first 30 mins on the go while others download on the background and become available before they are needed
tree-shaking
Tree shaking is simply removing unused code from the production code. Think of it this way, During development you add comments to make your code readable. or created Variables that you did not eventually use but forgot to remove Those comments also increase the file size and download Size . Tree Shaking Is simply removing all unused variables and comments.
Transpilling
Most older browsers do not support some current features of Javascript. Transpiling is Simply converting ES6+ code bases to Es5 code ( that will easily be understood by older browsers )
minification
Minification of code is simply removing spaces and reducing the length of variables to reduce the size and increase the performance of the code . Minification of an image is simply reducing the size of the picture to make it downloadable
cache
Not all part of the code need to be updated everytime . Caching is simply storing a portion of data so that it does not have to download everytime the user loads the page
What are the Best Build Tools and which one should you pick
There are many Build tools and the three most popular ones are Webpack , Parcel and Rollup . Though webpack is the standard choice , I still prefer using Parcel here's why
WebPack
- Performs all the main features of a build tool but requires a larger learning curve and it is harder to set up on the go
- requires a lot of other plugins to perform transpling (Babel)
- requires a lots of configuration for code-splitting
- requires a lot of plugins for caching
- fast builds slower rebuilts
Parcel
- requires absolutely no config file but performs the same functions
- slow builds faster rebuilds
Conclusion
In conclusion , please start making use of build tools Thanks for reading , I hope you enjoyed the read. Please follow me , and Comment if you will like to see a full article on how to set up a standard JS-dev- environment or the Topics you will like me to go in-depth. Thanks