JavaScript: How to improve performance

lachlan-donald-YVT5aF2QM7M-unsplash.jpg 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

Learn Something New Everyday,
Connect With The Best Developers!

Sign Up Now!

& 500k+ others use Hashnode actively.

Comments (1)

The Lazy Dev Otaku's photo

Very clear listing of the needs to improve performance and the path to take.

I'll be sure to look at Parcel