目录
ng build
ng build --prod
Environment
environment.ts
environment..prod.ts
缓存
只缓存css里引用的图片
所有build的文件
source maps
生成 
不生成
如何处理css
全局css输出到js文件
生成的是css文件
uglify
Tree-Shaking
不去掉无用代码
去掉无用代码
AOT
Bundling打包
--build-optimizer
是(和AOT以及Angular5)
--named-chunks
--output-hashing
media
所有
首页 web前端 js教程 使用Angular CLI进行Build(构建)和Serve详解

使用Angular CLI进行Build(构建)和Serve详解

May 29, 2018 am 10:52 AM
angular build 构建

这篇文章主要介绍了使用Angular CLI进行Build(构建)和Serve详解,现在分享给大家,也给大家做个参考。

Build.

Build主要会做以下动作:

  1. 编译项目文件并输出到某个目录

  2. Build targets决定了输出的结果

  3. bundling 打包

  4. 生产环境的build还会进行uglify和tree-shaking(把没用的代码去掉)

ng build.

可以先看帮助:

ng build --help
登录后复制

针对开发环境, 就是用命令 ng build.

默认情况下, 它的输出目录在.angular-cli.json文件里ourDir属性配置的, 默认是/dist目录.

build之后会看见dist里面有这些文件:

  1. inline.bundle.js 这是webpack的运行时.

  2. main.bundle.js 就是程序代码.

  3. pollyfills.bundle.js 就是浏览器的Pollyfills.

  4. styles.bundle.js 样式

  5. vendor.bundle.js 是angular和第三方库

可以使用source-map-explorer来分析依赖, 并且查看哪些模块和类在bundle里面.

首先修改上一个例子中的代码:

执行ng build:

可以看到生成了这些文件.

把dist里面的index.html格式化一下看看:

可以看到它引用了生成的5个js文件.

打开main.bundle.js可以看到我写的代码:

下面运行程序: ng serve -o:

可以看到在ng serve的时候, 加载了上述的文件.

因为ng build是开发时的build, 所以没有做任何优化, 文件挺大的.

这时看一下文件目录, 并没有dist目录:

那么这些文件是怎么被serve的呢?

这是因为, 这时候webpack是在内存中进行的serve.

下面使用source-map-explorer进行分析, 首先安装它:

npm install --save-dev source-map-explorer
登录后复制

然后执行 ng build, 再执行:

.\node_modules\.bin\source-map-explorer dist\main.bundle.js
登录后复制

结果会生成这个图形:

再看看vendor.bundle的情况:

.\node_modules\.bin\source-map-explorer dist\vendor.bundle.js
登录后复制

这里面东西就比较多了.

Build Targets和Environment.

Environment是指采用哪一个环境文件:

而Targets则是用来决定项目文件是如何被优化的.

看一下开发和生产build的对比.



ng build

ng build --prod

Environment

environment.ts

environment..prod.ts

缓存

只缓存css里引用的图片

所有build的文件

source maps

生成 

不生成

如何处理css

全局css输出到js文件

生成的是css文件

uglify

Tree-Shaking

不去掉无用代码

去掉无用代码

AOT

Bundling打包

--build-optimizer

是(和AOT以及Angular5)

--named-chunks

--output-hashing

media

所有

下面命令都是针对开发时的build, 它们的作用是一样的:

ng build
ng build --dev
ng build --dev -e=dev
ng build --target=development --environment=dev
登录后复制

下面则是生产build:

ng build --prod
ng build --prod -e=prod
ng build --target=production --environment=prod
登录后复制

其它常用的参数还有:

  1. --sourcemap -sm 生成source map

  2. --aot Ahead of Time编译

  3. --watch -w Watch并rebuild

  4. --environment -e Build环境

  5. --target -t Build target

  6. --dev 表示dev env和target

  7. --prod 表示prod env和target

Production Build.

先使用--aot:

ng build --aot
登录后复制

使用aot之后可以看到 vendor.bundle的大小降了很多, 只有1.5m左右了.

执行aot会去掉一些程序执行不需要的代码, 例如angular的compiler这时就不在build输出的文件里了(可以使用source-map-explorer查看).

试试生产环境:

ng build --prod
登录后复制

可以看到所有的文件都非常小了, 并且没有vendor了(因为prod下--build-optimizer起作用所以vendor没有了, 但可以使用--vendor-chunk true给弄出来).

Serve.

ng serve. 已经一直在用了, 下面看看它常用的参数:

  1. --open -o 打开默认浏览器

  2. --port -p 端口

  3. --live-reload -lr 发生变化时重新加载网页(默认开启的)

  4. --ssl 使用https

  5. --proxy-config -pc 代理配置

  6. --prod 在内存中serve 生产模式build的文件

试试 --prod:

ng serve --prod
登录后复制

通过文件大小可以看出确实是prod build的.

ng eject.

为项目生成webpack配置和脚本.

执行该命令试试:

看看有哪些变化:

.angular-cli.json:

package.json:

命令脚本都变了

还多出来一个webpack.config.js文件:

为什么要这么做呢?

可以对项目更深入的配置....

这时运行程序就是 npm start了.

我还是把reject恢复回去吧, 使用git来恢复吧.

如果需要Serve 其他js/css/assets文件:

放在.angular-cli.json就行, 例如jquery就应该放在scripts里面.

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

Vue项目中如何引入icon图标

JavaScript中的E-mail 地址格式验证

javascript性能优化之分时函数的介绍

以上是使用Angular CLI进行Build(构建)和Serve详解的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何在Ubuntu 24.04上安装Angular 如何在Ubuntu 24.04上安装Angular Mar 23, 2024 pm 12:20 PM

Angular.js是一种可自由访问的JavaScript平台,用于创建动态应用程序。它允许您通过扩展HTML的语法作为模板语言,以快速、清晰地表示应用程序的各个方面。Angular.js提供了一系列工具,可帮助您编写、更新和测试代码。此外,它还提供了许多功能,如路由和表单管理。本指南将讨论在Ubuntu24上安装Angular的方法。首先,您需要安装Node.js。Node.js是一个基于ChromeV8引擎的JavaScript运行环境,可让您在服务器端运行JavaScript代码。要在Ub

构建自定义的WordPress用户流程,第三部分:密码重置 构建自定义的WordPress用户流程,第三部分:密码重置 Sep 03, 2023 pm 11:05 PM

在本系列的前两个教程中,我们构建了用于登录和注册新用户的自定义页面。现在,登录流程中只剩下一个部分需要探索和替换:如果用户忘记密码并想要重置WordPress密码,会发生什么?在本教程中,我们将解决最后一步并完成我们在整个系列中构建的个性化登录插件。WordPress中的密码重置功能或多或少遵循当今网站上的标准方法:用户通过输入用户名或电子邮件地址并请求WordPress重置密码来启动重置。创建临时密码重置令牌并将其存储在用户数据中。包含此令牌的链接将发送到用户的电子邮件地址。用户点击链接。在重

微软 Win11 24H2 Build 26100 已发现多个 Bug,不建议安装 微软 Win11 24H2 Build 26100 已发现多个 Bug,不建议安装 Apr 07, 2024 pm 09:22 PM

本站4月7日最新消息,微软Win1124H2Build26100已发现多个Bug,暂时不建议在常用设备上安装。Windows1124H2目前还处于相当不稳定的阶段。虽然微软会通过每月累积更新逐步修复问题,但该版本距离正式发布并为大家带来稳定体验可能还需要一段时间。如果有用户安装了24H2版本镜像并遇到了问题,建议用户重新安装,目前使用已经较为稳定。ZacBowden,在尝试重置Windows1124H2Build26100版本时遇到了蓝屏死机,而"重置此电脑"功能本应是用于修复系统问题的,但却在

Angular组件及其显示属性:了解非block默认值 Angular组件及其显示属性:了解非block默认值 Mar 15, 2024 pm 04:51 PM

Angular框架中组件的默认显示行为不是块级元素。这种设计选择促进了组件样式的封装,并鼓励开发人员有意识地定义每个组件的显示方式。通过显式设置CSS属性 display,Angular组件的显示可以完全控制,从而实现所需的布局和响应能力。

如何利用Python构建智能语音助手 如何利用Python构建智能语音助手 Sep 09, 2023 pm 04:04 PM

如何利用Python构建智能语音助手引言:在现代科技快速发展的时代,人们对于智能化助手的需求越来越高。智能语音助手作为其中的一种形式,已经被广泛应用于手机、电脑、智能音箱等各种设备中。本文将介绍如何利用Python编程语言构建一个简单的智能语音助手,帮助您从零开始实现一个属于自己的个性化智能助手。准备工作在开始构建语音助手之前,我们首先需要准备一些必要的工具

使用Angular和Node进行基于令牌的身份验证 使用Angular和Node进行基于令牌的身份验证 Sep 01, 2023 pm 02:01 PM

身份验证是任何Web应用程序中最重要的部分之一。本教程讨论基于令牌的身份验证系统以及它们与传统登录系统的区别。在本教程结束时,您将看到一个用Angular和Node.js编写的完整工作演示。传统身份验证系统在继续基于令牌的身份验证系统之前,让我们先看一下传统的身份验证系统。用户在登录表单中提供用户名和密码,然后点击登录。发出请求后,通过查询数据库在后端验证用户。如果请求有效,则使用从数据库中获取的用户信息创建会话,然后在响应头中返回会话信息,以便将会话ID存储在浏览器中。提供用于访问应用程序中受

ChatGPT Java:如何构建一个智能音乐推荐系统 ChatGPT Java:如何构建一个智能音乐推荐系统 Oct 27, 2023 pm 01:55 PM

ChatGPTJava:如何构建一个智能音乐推荐系统,需要具体代码示例引言:随着互联网的迅猛发展,音乐已经成为人们日常生活中必不可少的一部分。而随着音乐平台的不断涌现,用户经常面临一个共同的问题:如何找到符合自己口味的音乐?为了解决这个问题,智能音乐推荐系统应运而生。本文将介绍如何使用ChatGPTJava构建一个智能音乐推荐系统,并提供具体代码示例。第

构建流畅无阻:如何正确配置Maven镜像地址 构建流畅无阻:如何正确配置Maven镜像地址 Feb 20, 2024 pm 08:48 PM

构建流畅无阻:如何正确配置Maven镜像地址在使用Maven构建项目时,配置正确的镜像地址是非常重要的。正确配置镜像地址可以加快项目构建的速度,避免网络延迟等问题。本文将介绍如何正确配置Maven镜像地址,并给出具体的代码示例。为什么需要配置Maven镜像地址Maven是一个项目管理工具,可以自动化构建项目、管理依赖、生成报告等。在Maven构建项目时,通常

See all articles