Deep Dive in Webpack
During the past few years, we have seen frontend technology is growing rapidly and many frameworks & libraries are being available and keep rolling a new version every 6 months.
Few major questions kept running in my mind for a long time:
- loading the dependencies “I Mean here by the dependencies the vendors such as Moment, Lodash…etc ”?
- how are these libraries are being registered in the memory?
- some of the projects are loading so many libraries but in the case of you observed the libraries are being registered only once they required as a dependency, how this kind of memory management are being taken care of?
- How lazy loading is working?
- How caching is working?
The simple answer for all of these questions is Webpack. Webpack is a static module bundler for modern JavaScript applications.
all the modern frontend Frameworks and libraries that are using Webpack as a bundler are having an embedded file called runtime.
IIFE (Immediately Invoked Function Expression)
Webpack relies on IIFE to secure the scope from being access through window property.
the following link is mentioning a few use cases that are being taking care through IIFE.
Function Expression
as mentioned in the link below Function declarations load before any code is executed while Function expressions load only when the interpreter reaches that line of code.
webpack wrap all the modules with function expressions and bundle them in IIFE files to make sure once the file is loaded, IIFE will execute and subscribe the modules as function expressions “to avoid executing them and overload the browser with un-necessary processes in addition to getting the benefit of reusability”.
Runtime
Runtime is the backbone Webpack, it has all the best practices that helps the project to initiate as a faster as possible.
Runtime is a JavaScript file that has one IIFE function that execute once it is loaded and if you are using any of the recent frontend frameworks (React, Angular, Vue), you would see either that file is mentioned separately as the first file to load or it is embedded within the main bundle file.
runtime as a file has almost 200 lines of codes along with comments. but these lines of codes are really must to know and understand. these are the gate for the most of the frontend technologies.
- webpackJsonp
once runtime is executed, it defines an empty array “webpackJsonp” and pass it to window property. on the other hand, it override push property with a local method called webpackJsonpCallback.
Since Push method is overrided with the local method, webpackJsonpCallback will trigger once push is called.
webpackJsonpCallback function expect 3 parameters:
ChunkId:
The file name of the module loaded and it is always a first param.
ModuleIds:
Second param. One big object and has all the Module-Ids as function expressions.
Array:
Third Param, This array is playing multiple roles here.
First item in the the array says, once the file is loaded, which module to be invoked from the ModuleIds above.
Starting from the second item in the array, it identifies all the dependencies required to be loaded before execute the first module.
- Lazy-Loading:
One of the major features in webpack is lazy-loading. here is the story behind it:
All frontend technologies are wrapping this feature with their use case. you just need to call __webpack_require__.e and pass the ChunkId “File path & name” and the magic will happen.
Once the file is loaded through runtime functionality, the required function-expression will get executed and component will get injected and works properly.
- Security:
Since the entire platform are running inside the IIFE, none of variables are being exposed to window properties and no-one will be able to hijack the project unless the developers exposed their memory variables to window property.
Conclusion
Webpack is providing a lot of capabilities that we should know about to follow the same and optimize our projects.
- Securing the scope is done through IIFE.
- Lazy-loading is an embeded feature in webpack- Runtime files.
- Once the file is loaded, ,the correspondent modules are being cached and next time the modules are being loaded from the cache.
- using function expression to optimize the rendering time and execute the require module only when it is required.
Nowadays, implementing a frontend project is an easy task, but scaling it is a comprehensive task that requires all the best practices to be planned and considered ahead.
