角度最小化

任何应用程序的性能都是决定这个世界上用户体验的关键因素之一。如果性能低下，则应用程序将无法为用户实现其真正价值。因此，鼓励在编码过程中采用各种实践以在生产环境中实现更高的性能。
同样，Angular框架还提供了各种选项来在运行时实现更高的性能。其中一些是AOT编译，捆绑，缩小等。在AOT编译中，Angular编译器在部署应用程序之前运行，从而减小了应用程序的整体大小。但这不是Angular框架默认情况下发生的。

现在，让我们谈谈Angular框架采用的默认流程，该流程可帮助开发人员实现更高的性能，例如捆绑和缩小。让我们在下面详细讨论它们：

捆绑和缩小是Angular用来减小应用程序大小以便可以在浏览器中快速下载的两个重要过程。

捆绑：

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

缩小：在缩小过程中，在js文件中进行了以下操作，以减小js文件的大小，从而加快下载速度。

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

通过做所有这些事情，Angular框架减小了js文件的整体大小。同样，Angular框架将.min添加到文件名以指示该特定文件的缩小。

让我们举个例子来更好地了解缩小过程。

module.js：

Javascript

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：

Java脚本

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框架的基本支柱。