如何配置Angular生产构建，从CDN加载外部依赖以减小包体积？

当然可以实现，把依赖从CDN加载、不打包进生产包的核心是配置Angular排除指定依赖的打包逻辑，再手动引入CDN资源。之前把依赖移到devDependencies没用是因为Angular CLI只要检测到代码里有导入，就会打包，和依赖类型无关。下面是具体步骤：

1. 配置Angular排除指定依赖打包 #

方式一：Angular 14+ 内置配置（推荐） #

在项目根目录的angular.json中，找到对应项目的build配置，在options里添加externalDependencies字段，列出所有要从CDN加载的依赖：

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    // 保留原有配置，新增下面这行
    "externalDependencies": ["@angular/core", "@angular/common", "@angular/router", "rxjs", "moment"],
    // ...其他配置（outputPath、index、main等）
  },
  "configurations": {
    "production": {
      // 保留原有生产配置
    }
  }
}

方式二：Angular 13及以下 自定义Webpack配置 #

如果你的Angular版本较低，需要借助自定义Webpack配置：

• 先安装依赖：npm install @angular-builders/custom-webpack --save-dev
• 修改angular.json的builder为自定义webpack：

"build": {
  // 替换原有builder
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
    // 新增自定义webpack配置文件路径
    "customWebpackConfig": {
      "path": "./webpack.config.js"
    },
    // ...其他原有配置
  }
}

• 在项目根目录创建webpack.config.js，配置externals映射（全局变量要和CDN包暴露的一致）：

module.exports = {
  externals: {
    '@angular/core': 'ng.core',
    '@angular/common': 'ng.common',
    '@angular/router': 'ng.router',
    '@angular/platform-browser': 'ng.platformBrowser',
    '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic',
    'rxjs': 'rxjs',
    'moment': 'moment'
  }
};

2. 在index.html中引入CDN资源 #

在src/index.html的<body>末尾（或<head>中）添加对应依赖的CDN脚本链接，务必保证版本号和你package.json里的依赖版本一致：

<!-- Angular核心库 -->
<script src="https://cdn.jsdelivr.net/npm/@angular/core@16.2.0/bundles/core.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@angular/common@16.2.0/bundles/common.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@angular/router@16.2.0/bundles/router.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@angular/platform-browser@16.2.0/bundles/platform-browser.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@angular/platform-browser-dynamic@16.2.0/bundles/platform-browser-dynamic.umd.js"></script>
<!-- RxJS -->
<script src="https://cdn.jsdelivr.net/npm/rxjs@7.8.1/dist/bundles/rxjs.umd.min.js"></script>
<!-- Moment.js -->
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/min/moment.min.js"></script>

3. 保留类型定义（可选但建议） #

虽然不打包依赖，但TypeScript仍需要类型检查，所以相关的@types包要保留在devDependencies中，比如@types/moment，不需要删除。

验证效果 #

运行ng build --configuration production后，查看dist目录下的main.*.js文件大小，会发现体积大幅减小，说明依赖已被排除打包。同时启动生产环境的静态服务器测试，确保应用能正常加载运行。

内容的提问来源于stack exchange，提问作者Prasanth