Angular应用打包与部署步骤详解

Angular应用打包全流程详解

说到Angular应用打包，其实流程相当直接。只需在项目根目录下执行一条命令即可完成构建：

ng build

接着你会看到终端迅速滚动信息，最终输出类似以下内容：

chunk {main} main.js, main.js.map (main) 22.4 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.5 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.22 MB [initial] [rendered]
Date: 2022-06-05T08:13:29.036Z - Hash: 320a98b795509f74dda8 - Time: 6897ms

在这个构建过程中，Angular编译器会收集所有TypeScript源文件，将其编译为浏览器能够识别的JavaScript代码，最终统一输出到默认的dist目录中。

开发模式构建输出文件解析

打开dist目录后，你会看到一系列文件，每个都承担着特定职责：

• favicon.ico —— 浏览器标签栏上显示的品牌图标，用于区分站点。
• index.html —— 应用的入口页面，是所有脚本加载与挂载的起点。
• main.js —— 你自己编写的业务逻辑代码，经过压缩与打包后的成果。
• polyfills.js —— 为老旧浏览器提供兼容性补丁，使其支持现代JavaScript语法。
• runtime.js —— Angular CLI运行时模块，负责加载和管理其他脚本文件。
• styles.js —— 全局样式资源，包含除组件样式之外的所有CSS定义。
• vendor.js —— 第三方依赖库合集，Angular框架本身也包含在内。

此外还会生成一批.map源映射文件，这些文件主要用于开发调试——在开发环境下借助它们可以快速定位错误，但生产环境通常不需要保留。

让我们看看构建后生成的index.html的结构：

注意每个脚本标签上的defer属性——它确保脚本在DOM解析完成后按顺序执行，不会阻塞页面渲染流程。

Angular CLI提供了两种核心构建模式：开发模式（默认）和生产模式。直接执行ng build就是开发模式，想要生成生产环境包，需要添加选项：

ng build --configuration=production

或者使用开发者们更习惯的快捷方式：

ng build —prod

生产模式构建的输出效果如下：

生产模式构建结果一览

与开发模式相比，最直观的区别是——.map文件不再出现（生产环境无需调试），所有JavaScript和CSS文件名都附加了哈希值。这个哈希值非常实用：当文件内容发生变化时，哈希值会随之更新，从而强制浏览器缓存失效，确保用户始终获取最新版本。

限制包体积，防止性能滑坡

随着业务功能不断增加，打包后的文件体积也会逐步膨胀。Angular内置了“预算”机制，只需在angular.json中配置即可提前预警。示例配置如下：

"budgets": [
  {
    "type": "initial",
    "maximumWarning": "2mb",
    "maximumError": "5mb"
  },
  {
    "type": "anyComponentStyle",
    "maximumWarning": "6kb",
    "maximumError": "10kb"
  }
]

这是CLI默认生成的预算配置。你可以根据项目的实际需求调整阈值，甚至采用百分比方式来约束——例如“某个组件样式不能超过整体体积的10%”。更多自定义玩法，官方文档中有详细说明。

部署Angular应用，一步到位

部署Angular应用本质上就是简单的“文件搬运”：将dist目录中的所有文件复制到服务器指定路径下即可完成。

但有一个关键细节需要留意：如果应用部署在服务器的子目录（例如/myapp/）而非根目录，必须通过--base-href参数告知Angular正确的基路径：

ng build --prod --base-href=/myapp/

这样生成的index.html中的会自动调整，所有资源请求都将携带此前缀，避免404错误的发生。

以上就是Angular应用从打包到部署的完整流程。核心逻辑清晰：开发模式便于调试，生产模式追求极致性能，部署时注意路径配置。上手实践后你会发现，这些操作并不复杂。