Angular中的小型化

任何应用程序的性能是决定这个世界上用户体验的关键因素之一。如果性能低下，应用程序将无法实现其对用户的真正价值。因此，我们鼓励在编码过程中采取各种做法，以便在生产环境中实现更高的性能。
同样地，Angular框架也提供了各种选项，以在运行时获得更高的性能。其中一些是AOT编译、捆绑、小型化等。在AOT编译中，Angular编译器在应用部署前运行，从而减少了应用的整体大小。但Angular框架默认不会这样做。

现在，让我们来谈谈Angular框架所采用的默认流程，它可以帮助开发者实现更高的性能，即捆绑和最小化。让我们在下面详细地谈谈它们。

Bundling和最小化是Angular采用的两个重要过程，以减少应用程序的大小，使其能够在浏览器中快速下载。

Bundling:

在捆绑中，应用程序中的所有js文件被作为一个单元下载，而不是下载每个js文件，这总体上减少了整个应用程序的下载时间，从而实现更高的性能。
让我们举个例子来了解一下。
假设我的应用程序中有三个js文件。因此，当应用程序被部署时，Angular框架默认将这三个js文件合并为一个文件，从而减少了应用程序的大小，现在可以在用户浏览器中快速下载。

最小化：在最小化过程中，在js文件中做了以下事情，以减少js文件的大小，以便更快地下载。

它删除了文件中的所有空白。
它删除了文件中所有不需要的变量。
它将所有大的变量名称转换为小的变量名称。

通过做所有这些事情，Angular框架减少了js文件的整体大小。此外，Angular框架还在文件名中添加了.min，以表示对该特定文件进行了最小化。

让我们举一个例子来更好地理解减化过程。

module.js:

module.exports = function(module) {
    if (!module.webpackPolyfill) {
        module.deprecate = function() {};
        module.paths = [];
  
        // module.parent = undefined by default
        if (!module.children) module.children = [];
        Object.defineProperty(module, "loaded", {
            enumerable: true,
            get: function() {
                return module.l;
            }
        });
        Object.defineProperty(module, "id", {
            enumerable: true,
            get: function() {
                return module.i;
            }
        });
        module.webpackPolyfill = 1;
    }
    return module;
};

当你运行ng build -prod时，Angular框架的最小化代码是。

module.min.js:

module.exports=function(e){return e.webpackPolyfill||(e.deprecate=function(){},e.paths=[],e.children||(e.children=[]),Object.defineProperty(e,"loaded",{enumerable:!0,get:function(){return e.l}}),Object.defineProperty(e,"id",{enumerable:!0,get:function(){return e.i}}),e.webpackPolyfill=1),e};

所以，正如你所看到的，在最小化的版本中，所有的空白都被删除了，变量的名称也被缩短了。因此，将代码减少到只有一行代码，减少了js文件和应用程序的整体大小。

因此，最小化和捆绑实际上是相互关联的过程，有助于减少js文件的大小，以便在浏览器中更快地下载，给用户带来愉快的体验。当涉及到提高应用程序的整体性能时，这些是Angular框架的基本支柱。