Complex build processes have dominated the web development world for years. JavaScript module bundling, transpiling, and management have become critical tasks for tools such as Webpack. However, what if there was an easier method?
It is time for us to "un-learn" old tricks and rid ourselves of the baggage of old knowledge! Modern browsers support HTTP/2 and "import maps" for javascript modules and this is an absolute game changer!
In the past, web browsers had trouble comprehending contemporary JavaScript features and had trouble loading many small files quickly. Webpack and other build tools addressed these problems by:
- Bundling: Putting several JavaScript files together into a single, bigger file to cut down on HTTP requests.
- Transpiling:transforming current JavaScript syntax into an earlier iteration that works with an earlier browser.
Although these technologies were helpful to us, they increased complexity:
- Build Configuration: Build procedures frequently cause disruptions to the development workflow, necessitating continuous rebuilding and waiting.
- Development Workflow Disruption: Build configurations can be time-consuming to set up and manage.
But all modern browsers (Chrome, Firefox, Safari, Edge) support HTTP/2 and "Import Maps" for JS modules.
- Import maps enables us to use alias for full JS module paths - it is a method of creating a central registry that associates module names with their real locations is. This makes things clearer and more versatile by removing the requirement for you to write whole file paths in your code (across multiple files).
- HTTP/2 is a more effective and rapid method of sending data across the internet. It makes it unnecessary to bundle files because browsers can handle several tiny files well. Instead of opening many connections to the server (like having many waiters running around), HTTP/2 uses one connection. Thus, multiple JS files can be downloaded concurrently, speeding up page load times.
No comments:
Post a Comment