Angular升级后运行编译变慢?如何解决?

        公司的Angular项目升级后,使用体验感十分不好,运行、编译的时间明显增长,工作效率是十分低下,但奈何公司的大佬们都有自己的事情要忙,结识的大佬也不够多,只能靠自己找度娘了。但是,哎,你还别说,真让我找到了!!!

感谢下面这位大大的分享:解决在升级到Angular v13之后,ng serve启动变慢(slow)的问题_angular12编译慢-CSDN博客

        上面这位大大的分享中呢有一篇来自外国程序员的解释(https://dev.to/brandontroberts/speeding-up-the-development-serve-after-upgrading-to-angular-v12-5db5),大家有条件可以自行查看,不过个人觉得上面大大的文章已经十分详细了,完全足够!亲试有效!!!

主要解决办法截图如下:再次感谢大大的分享!

        总结解决办法:添加development构建配置,也就是我们需要手动将开发选项添加为默认值,并将serve中target的defaultConfiguration设置为development

      注意按照上面截图改了之后初始运行整个项目的时间几乎没有太大改变,但是编译时间是有明显改善的!!!

      要想初始运行整个项目的时间也减少,需要进行下面的配置:

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
+          "defaultConfiguration": "",
          "options": {
+            "browserTarget": "ngv12:build:development"
          },
          "configurations": {
            "production": {
              "browserTarget": "ngv12:build:production"
            },
+           "development": {
+            "browserTarget": "ngv12:build:development"
+           }
          }
        }

完整代码如下:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ngv12": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ngv12",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
+            "development": {
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "buildOptimizer": false,
+              "sourceMap": true,
+              "optimization": false,
+              "namedChunks": true
+            },
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          },
+          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
+          "defaultConfiguration": "",
          "options": {
+            "browserTarget": "ngv12:build:development"
          },
          "configurations": {
            "production": {
              "browserTarget": "ngv12:build:production"
            },
+           "development": {
+            "browserTarget": "ngv12:build:development"
+           }
          }
        }
      }
    }
  },
  "defaultProject": "ngv12"
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/413398.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

日更【系统架构设计师知识总结2】指令系统(结合真题)

【原创精华】结合老师的讲授、耗费三个小时的精华总结对正在备考的你一定有用!!自己一点点手打、总结的脑图,把散落在课本以及老师讲授的知识点合并汇总,反复提炼语言,形成知识框架。希望能给同样在学习的伙伴一点帮助…

Python接口自动化之unittest单元测试!

以下主要介绍unittest特性、运行流程及实际案例。 一、单元测试三连问 1、什么是单元测试? 按照阶段来分,一般就是单元测试,集成测试,系统测试,验收测试。单元测试是对单个模块、单个类或者单个函数进行测试。 将访…

【C++进阶】深入了解继承机制

目录 前言 1. 继承的概念 2. 继承的定义 3. 继承中基类与派生类的赋值转换 4. 继承中的作用域 5. 派生类的默认成员函数 6. 继承与友元、静态成员 7. 多继承与菱形继承 7.1 如何解决 前言 继承是面向对象编程中的一个重要概念,也是面向对象编程语言中普遍存在的特…

项目登录方案选型

一.Cookie + Session 登录 大家都知道,HTTP 是一种无状态的协议。无状态是指协议对于事务处理没有记忆能力,服务器不知道客户端是什么状态。即我们给服务器发送 HTTP 请求之后,服务器根据请求返回数据,但不会记录任何信息。为了解决 HTTP 无状态的问题,出现了 Cookie。Co…

计网Lesson15 - TCP可靠传输

文章目录 1. 停止等待ARQ协议2. 连续ARQ协议与滑动窗口协议 1. 停止等待ARQ协议 ARQ(Automatic Repeat–reQuest)自动重传请求 几种重传情况 发送端丢失 发送方过久没有接收到接收方的确认报,这种情况会触发超时重传机制,发送方…

【Godot4.2】菜单栏生成函数库menuDB

概述 关于Godot的手动菜单栏制作,我已经在之前的文章中有所描述。 但是对于一些场景,手动制作菜单仍然是一个比较低效的做法。所以我将MenuBar以及基于HBoxContainerMenuButton创建菜单栏写成了一个静态函数库。 利用此函数库我们可以用函数形式构造P…

【Oracle】玩转Oracle数据库(六):模式对象管理与安全管理

前言 嘿,数据库大冒险家们!准备好迎接数据库管理的新挑战了吗?今天我们要探索的是Oracle数据库中的模式对象管理与安全管理!🛡️💻 在这篇博文【Oracle】玩转Oracle数据库(六)&#…

CTFHub技能树web之XSS

在XSS系列的题目中,由于需要使用能够接受XSS数据的平台,并且由于使用的是CTFHub的模拟机器人点击我们的虚假URL,因此使用的XSS平台不能是自己本地搭建的,如果是本地的模拟点击的机器人将无法访问我们给的这个URL地址,也…

Maven【1】(命令行操作)

文章目录 一丶创建maven工程二、理解pom.xml三、maven的构建命令1.编译操作2.清理操作3.测试操作4.打包操作5.安装操作 一丶创建maven工程 首先创建这样一个目录,然后从命令行里进入这个目录: 然后接下来就在这个命令行里进行操作了。 这个命令是&…

听劝!年后跳槽需谨慎……

​新年新气象,许多不满需求的开发者都想开展一番新的事业。跳槽找工作是要吃老本行?还是换岗?请三思啊!! 2024年的移动开发行业岗位还友好吗? 随着互联网的时间发展推移,大部分开发岗已经走向末…

Spring Cloud Gateway官方文档学习

文章目录 推荐写在前面一、熟悉Gateway基本概念与原理1、三大概念2、工作流程 二、基本使用路由断言的两种写法 三、路由断言工厂1、After路由断言工厂2、Before路由断言工厂3、Between路由断言工厂4、Cookie路由断言工厂5、Header路由断言工厂6、Host路由断言工厂7、Method路由…

中间件-Nginx漏洞整改(限制IP访问隐藏nginx版本信息)

中间件-Nginx漏洞整改(限制IP访问&隐藏nginx版本信息) 一、限制IP访问1.1 配置Nginx的ACL1.2 重载Nginx配置1.3 验证结果 二、隐藏nginx版本信息2.1 打开Nginx配置文件2.2 隐藏Nginx版本信息2.3 保存并重新加载Nginx配置2.4 验证结果2.5 验证隐藏版本…

LabVIEW光伏逆变器低电压穿越能力测试

LabVIEW光伏逆变器低电压穿越能力测试 随着光伏发电技术的迅速发展,光伏逆变器的低电压穿越(LVRT)能力日益成为影响电网稳定性的关键因素。为了提升光伏逆变器的并网性能,开发了一套基于LabVIEW的光伏逆变器LVRT测试系统。该系统…

【VSCode】SSH Remote 通过跳板机连开发机提示“bash行1 powershell未找到命令”

需求背景 因为需要,在家我需要挂上公司VPN然后SSH连到跳板机,然后再从跳板机SSH进开发机。 问题背景 跳板机进开发机输入完密码显示 bash行1 powershell未找到命令VSCode SSH Remote跳板机配置请自行搜素其他文章config配置 注意其中ssh.exe地址请根据…

用39块钱的全志V851se视觉开发板做了个小相机,还可以物品识别、自动追焦!

用39块钱的V851se视觉开发板做了个小相机。 可以进行物品识别、自动追焦! 这个超低成本的小相机是在V851se上移植使用全志在线开源版本的Tina Linux与OpenCV框架开启摄像头拍照捕获视频,并结合NPU实现Mobilenet v2目标分类识别以及运动追踪等功能…并最终…

k8s节点负载使用情况分析命令kubectl describe node [node-name]

1.到任意安装了kubectl节点命令的节点上执行kubectl describe node [node-name] 上面的Requests最小分配 Limits最大分配是所有pod之和,最小分配之和不能超过服务器实际参数,否则新的pod会因为资源不够起不来,最大分配是预设之和&#xff0…

图片数据爬取工具Image-Downloader

图片数据爬取工具Image-Downloader_image downloader-CSDN博客文章浏览阅读1.2k次。既然我们使用 Image-Downloader 这个工具进行图片搜索,相比python我们都非常熟悉,在此不在叙述,可参考其他文章。_image downloaderhttps://blog.csdn.net/w…

有方机器人 STM32智能小车 项目学习笔记1

今天开始学习有方机器人--智能小车项目,正点原子部分的学习先放一放,还是小车更有吸引力哈哈。 新建工程及工程模板搭建 新建工程须知 目前常用的 STM32 的开发方式主要有基于寄存器编程、基于标准库函数编程、基于 HAL 库编程这三种。 寄存器版本--…

七、防御保护---VPN篇

七、防御保护---VPN篇 一、VPN介绍二、VPN的分类2.1 根据建设的单位不同分类2.2 根据组网方式不同分类2.3 根据应用场景不同分类2.4 按照VPN技术实现的网络层次进行分类: 三、VPN的核心技术3.1 隧道技术3.2 身份认证技术3.3 加密技术3.4 数据验证技术 一、VPN介绍 …

【Python-语法】

Python-语法 ■ Python基础■ 数据类型■ 注释 单行注释,多行注释■ 编码方式 ■■■■■ ■ Python基础 ■ 数据类型 ■ 注释 单行注释,多行注释 ■ 编码方式 ■ ■ ■ ■ ■
最新文章