首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular CLI不包含ng构建上的所有包--prod

Angular CLI是一个命令行工具,用于快速创建、构建和管理Angular应用程序的开发过程。它提供了一系列的命令,可以帮助开发人员自动化地完成各种任务,如创建组件、服务、模块,运行开发服务器,构建和打包应用程序等。

在Angular CLI中,ng build命令用于构建应用程序。通过ng build命令,可以将应用程序的源代码编译成可在浏览器中运行的静态文件。然而,ng build命令默认情况下不会对构建过程中的所有包进行优化,即不会进行代码压缩、混淆和树摇等操作。

要在ng build命令中包含所有构建优化选项,需要使用--prod标志。--prod标志会启用生产模式构建,它会对代码进行优化,包括压缩、混淆和树摇等操作,以减小应用程序的文件大小并提高性能。

使用--prod标志的ng build命令示例:

代码语言:txt
复制
ng build --prod

通过使用--prod标志,Angular CLI会自动应用一系列的构建优化策略,以生成适用于生产环境的最终构建文件。这些优化策略包括但不限于以下内容:

  1. 代码压缩:通过删除不必要的空格、注释和换行符等,减小代码文件的大小,提高加载速度。
  2. 代码混淆:将变量和函数名替换为无意义的短名称,增加代码的安全性和难以理解性。
  3. 树摇(Tree Shaking):通过静态分析代码,删除未使用的代码块,减小构建文件的体积。
  4. Ahead-of-Time (AOT) 编译:将模板编译为原生JavaScript代码,减少运行时的解析和编译时间,提高应用程序的性能。
  5. 文件缓存:为构建文件生成唯一的哈希值,以便在文件内容没有变化时,浏览器可以从缓存中加载文件,减少网络请求。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云云服务器(CVM):提供可扩展的云服务器实例,用于部署和运行应用程序。产品介绍链接
  • 腾讯云对象存储(COS):提供安全、稳定、低成本的云端存储服务,用于存储和管理应用程序的静态文件。产品介绍链接
  • 腾讯云内容分发网络(CDN):加速静态资源的传输,提高应用程序的访问速度和用户体验。产品介绍链接
  • 腾讯云云数据库MySQL版(TencentDB for MySQL):提供高性能、可扩展的云数据库服务,用于存储和管理应用程序的数据。产品介绍链接
  • 腾讯云云函数(SCF):无服务器计算服务,用于按需运行应用程序的代码,无需关心服务器的管理和维护。产品介绍链接

请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求和项目要求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular CLI 简介

下面我生成一个项目, 并且执行npm install: 命令执行完, 可以看到如下项目结构; 里面有node_modules目录了, 也就是所有都安装好了, 接下来我可以运行该项目了: ng...查看浏览器http://localhost:4200: ng serve优点是, 当代码文件有变化时候会自动重新构建并且刷新浏览器, 您可以试一下. 另外一种配置CLI方法 ng set....生成Gurad. ng g guard xxx 这个命令将会生成xxx.guard.ts 使用Angular CLI进行Build (构建) 和 Serve 第一篇文章是: "使用angular cli...ng build ng build --prod Environment environment.ts environment..prod.ts 缓存 只缓存css里引用图片 所有build文件 source...实际angular cli是配合着protractor来进行这个测试. 它命令是 ng e2e.

6K110

Angular CLI 使用教程指南参考

安装 要安装Angular CLI你需要先安装node和npm,然后运行以下命令来安装最新Angular CLI: 注意:Angular CLI 需要Node 4.X 和 NPM 3.X 以上版本支持...基本用法 你可以通过 Angular CLI  help 命令来获取相关命令信息. ng help Angular CLI命令关键字为 ng ng new 命令 描述 ng new [options] 创建一个新 Angular 项目,默认在当前所在目录下 参数 描述 --dry-run -d 只输出要创建文件和执行操作,实际并没有创建项目 --verbose -v...init [options] 在当前所在目录下初始化一个新 Angular 项目 参数 描述 --dry-run -d 只输出要创建文件和执行操作,实际并没有创建项目...# 这是生产构建 ng build --target=production --environment=prod ng build --prod --env=prod ng build --prod

3K50

玩转 Angular 环境变量

environment.ts 和 environment.prod.ts 在 Angular CLI 发布后,越来越多开发者都是使用 Angular CLI 来创建新项目: $ ng new PROJECT-NAME...CLI 除了自动生成上述两个文件之外,还会自动生成其它文件,其中就包含 Angular 应用程序入口文件 —— main.ts: import { enableProdMode } from '@...通过上面的注释,我们知道在执行 ng build ---prod 命令,进行项目构建时候,会执行文件替换操作。...: $ ng build --prod 那么有的同学,可能想到对于构建测试环境,是不是只要运行: $ ng build --test 想象中很完美,但实际并不是这样,ng build 命令并不支持...掌握了本文所涉及内容,基本已经可以满足大多数项目的需求,对于上述内容如果有遗漏地方欢迎大家补充哈。

3.2K20

Angular 工具篇之npx及angular-cli-ghpages

这是构建工具(如 Create React App 或 webpack CLI)所使用方式。它确保你始终使用最新版本生成器或构建工具,而无需在每次使用它时进行升级。...你可以通过 Angular CLI 创建新项目或在想要部署到 Github Pages Angular 项目中使用 angular-cli-ghpages。...前,你需要进行项目构建,这时你可以执行以下命令: $ ng build --prod --base-href "https://USERNAME.github.io/REPOSITORY_NAME/"...或者使用以下命令: $ ng build --prod --base-href "/REPOSITORY_NAME/" 在项目构建完成后,就可以通过以下命令自动地把本地项目发布到 Github Pages...: $ npx ngh [OPTIONS] 需要注意是对于使用 Angular CLI 6 以上版本用户来说,在部署时你需要指定部署目录: $ npx ngh --dir=dist/[PROJECTNAME

1.9K20

Angular 工具篇之分析大小

下面我们将使用 Github angular6-example-app 这个项目来演示上述两个工具使用案例,首先我们先来初始化 angular6-example-app 这个项目。...: $ npm i webpack-bundle-analyzer --save-dev 接下来我们使用 Angular CLI构建项目,在构建时候,需要添加相关参数,具体如下: $ ng build...--prod --stats-json 当项目构建完成后,在根目录下 dist 文件夹下会生成一个 stats.json 文件,然后我们可以通过以下命令来查看 webpack 打包文件大小信息:...在 angular6-example-app 项目中,也为我们提供了相应 npm script,具体如下: "bundle-report": "ng build --prod --stats-json...为了方便操作,我们也可以定义一个 npm script 任务来处理上述工作: "map-explorer": "ng build --prod --source-map && source-map-explorer

2.4K40

Angular 2.x折腾记 :(1)初识Angular-cli及脱坑要点

什么是angular-cli 简言之:就是NG团队自行维护一个项目脚手架[内置单元测试及webpack打包工具等],这货前身是ember-cli; 官网 / Github 吐槽 我最早是从Angular...cli beta18开始用,截止beta28.3,这个分支已经废弃,已经迁移,之前npm install angular-cli推荐; 目前最新是v1.0.0正式版【2017-3-24】,从旧版本到...正式版配置稍微有些改动,我比较了下基本不大,放心使用 系统环境配置 window 安装lts版本nodejs v6.10.0 , Angular-clinode-sass不支持7.x,装.../cli cnpm:cnpm install -g @angular/cli@v1.0.0 yarn:yarn add global @angular/cli 。.../environments.prod.ts 弹出配置文件(还原真实配置文件) ng eject : 这个东西配置很多,可以弹出各种各样源配置和文件 我们看到ng开头命令都是二重封装。。。

13710

angular入门教程_初学者织围巾简单教程慢动作

://registry.npm.taobao.orgcnpm i -g @angular/cli cnpm 是淘宝发布一款工具,会自动把 npm 上面的所有定时同步到国内服务器上来,cnpm 本身也是一款...如果你想让编译更小一些,可以使用 ng serve –prod,@angular/cli 会启用 TreeShaking 特性,加了参数之后编译过程也会慢很多。...构建最终产品版本可以加参数,ng build –prod。...构建项目:ng build,如果你想构建最终产品版本,可以用 ng build –prod 更多命令和参数请在终端里面敲 ng 仔细查看,尽快熟悉这些工具可以非常显著地提升你编码效率。...否则,请使用 cnpm 来安装 @angular/cli,原因有三:1、cnpm 缓存服务器在国内,你装东西速度会快很多;2、用 cnpm 可以帮你避开某些模块装问题,因为它在服务器上面做了缓存

3.3K20

Angular 2 + 折腾记 :(1)初识Angular-cli及脱坑要点

---- 什么是Angular-cli 简言之:就是NG团队自行维护一个`脚手架`[内置单元测试及webpack2打包工具等] -- 这货前身是ember-cli; 官网:cli.angular.io...,已经迁移,之前npm install angular-cli推荐; 目前最新是v1.0.0正式版【2017-3-24】;从旧版本到rc期间坑了太多次,每次升级各种酸爽; rc2开始基本变化不大,可以直接拿来用了...装 装了visual studio 2015+及python2+ [node-sass及部分模块需要调用这两个依赖进行编译] 或者采用国内cnpm安装,记得带版本号,有时候不带版本会安装0.0.1.../cli -- 无压力过墙孩子推荐 或者 cnpm install -g @angular/cli@v1.0.0-rc.2 -- 国内淘宝源(cnpm安装自行搜索) 或者 yarn add global...---- 初始化项目 angular-cli可以初始化ng2或者ng4项目,我这里说2+; 脚手架命令很多,我这里只列出最常用; 新建东东 范围 命令 作用 new ng new new_project

1.8K10

更小更快更易用Angular5管中窥豹

如果未安装过angular-cli,则直接执行此句命令并跳过后续所有步骤即可:npm install -g @angular/cli@latest 至于怎么更新可以看Github:https://github.com.../angular/angular-cli,具体操作如下: 首先敲入命令查看下当前cli版本: ng -v ?.../cli 如果你使用Angular CLI 1.0.0-beta.28或以下版本, 你需要先卸载angular-cli,从angular-cli向 @angular/cli转化: npm uninstall...latest npm install 第二步,新建一个Angular5项目 执行以下命令: ng new angular5 cd angular5 ng serve 打开localhost:4200/...我们执行下打包命令: ng build --prod 查看命令输出窗口,对比下常规运行和打包后内容,可以看到文件得到了非常大压缩: ?

93530

如何在 Windows 安装 AngularAngular CLI、Node.js 和构建工具指南

如何在 Windows 安装 AngularAngular CLI、Node.js 和构建工具指南 本文翻译自How to Install Angular on Windows: A Guide to...与当今大多数现代前端工具一样,Angular CLI 构建在 Node.js 之上。 Node.js 是一种服务器技术,允许您在服务器运行 JavaScript 并构建服务器端 Web 应用程序。...一旦构建了用于生产应用程序,您将不需要 Node.js,因为最终捆绑只是静态 HTML、CSS 和 JavaScript,可以由任何服务器或 CDN 提供服务。...但 Angular 不依赖 Node.js,除了它 CLI 工具和从 npm 安装。 NPM 代表Node包管理器。它是托管 Node 注册表。...我们看看各个文件作用: /e2e/:包含网站端到端(模拟用户行为)测试 /node_modules/:使用 npm install 将所有 3rd 方库安装到此文件夹 /src/:包含应用程序源代码

32100
领券