Why use a dynamic module bundler?

Before moving ahead, it can be useful to explain why we just did so much hard work with a dynamic module packer/bundler such as Webpack instead of dropping a bunch of links pointing to all the relevant JS files--either hosted locally or, even better, through a high-performance CDN--right from the beginning.

To keep it simple, we did that because it's the only way to efficiently handle any modern JavaScript modular system such as Angular, RxJS, and also all applications based upon them, including the one we're working on right now.

What's a modular system exactly? It's nothing more than a package, library, or application split into a series of smaller files depending on each other using reference statements such as import and require. ASP.NET, Java, Python, and most compilation-based languages have it; that's not the case of script-based languages such as PHP and JavaScript, which are doomed to preload everything in memory before being able to determine whenever they'll be using it or not. All these change with the introduction of ECMAScript 6 (also known as ES6), which brings a full-featured module and dependency management solution for JavaScript.

Module bundlers such as Webpack pack a number of relevant JS/CSS resources at build time, including most ES6-polyfills for browsers that don't support it already, allowing us to get that module system working in modern browsers. Since both Angular and RxJS leverage such an approach, implementing it within our project will result in a huge performance gain.

We chose Webpack over other module packers, bundlers, and/or loaders (such as SystemJS) because of its great flexibility, as it provides a great way to properly package our application (concat, uglify, and the likes) with the additional knowledge given by its dependency graph. Additionally, Webpack received a great level of support in .NET Core 2, thanks to the introduction of the Microsoft ASP.NET Core JavaScript Services project and the Webpack Middleware, as we've already seen in this paragraph, making it the most logical choice when developing with .NET Core and Angular.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.12.108.175