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 —— 为老旧浏览器提供语法兼容补丁。
• runtime.js —— Angular CLI运行时，负责加载和管理其他脚本。
• styles.js —— 全局样式，包含组件样式以外的所有CSS。
• vendor.js —— 第三方库和Angular框架本身的代码。

此外还会生成.map文件（source map），用于开发环境下的调试；生产环境中不需要这些文件。

构建出的index.html示例：

  
  
  
  
  


  
  
  
  
  
  


注意defer属性：脚本会在DOM解析完成后按顺序执行，不会阻塞页面渲染。
Angular CLI提供两种构建模式：开发模式（默认）和生产模式。直接执行ng build为开发模式；生产模式需添加选项：
ng build --configuration=production
另一种常见快捷方式：
ng build --prod
生产模式构建的输出如下所示：

生产模式构建
与开发模式的主要区别：.map文件不再生成（生产环境无需调试），所有JS和CSS文件名带有哈希值。哈希值随文件内容变化而变化，可强制浏览器缓存失效，确保用户获取最新版本。
限制包大小
随着业务功能增加，打包文件体积会逐渐增大。Angular提供了“预算”机制，在angular.json中配置即可预防问题。例如：
"budgets": [
  {
    "type": "initial",
    "maximumWarning": "2mb",
    "maximumError": "5mb"
  },
  {
    "type": "anyComponentStyle",
    "maximumWarning": "6kb",
    "maximumError": "10kb"
  }
]
以上为CLI默认生成的配置。可根据项目实际需求调整阈值，或使用百分比进行限制（如“某个组件的样式不超过整体体积的10%”）。更多用法可参考官方文档。
部署应用
部署Angular应用本质上就是将dist目录中的所有文件复制到服务器指定路径即可。
需注意：如果应用部署在服务器的子目录（如/myapp/）而非根目录，必须指定“基路径”。添加--base-href参数：
ng build --prod --base-href=/myapp/
生成的index.html中的会自动调整，所有资源请求会带上该前缀，避免404错误。
以上为Angular应用打包和部署的完整流程。核心思路清晰：开发模式方便调试，生产模式追求性能，部署时注意路径配置。掌握这些即可轻松完成打包部署工作。