如何在Angular 5构建中排除moment.js的本地化语言包？

数据老陈

2026-5-25

解决Angular 5中moment.js打包体积过大的问题（无需修改webpack.config.js）

我之前在Angular 5项目里用moment和material-moment-adapter的时候，也碰到过打包后moment占了main.js好大一块的问题！后来试了几个不用手动修改webpack.config.js的方案，亲测有效，分享给你：

替换导入方式，按需加载语言包
别再用import * as moment from 'moment';这种全量导入了，直接导入moment的核心源码，这样默认不会加载任何本地化语言包：
```
import moment from 'moment/src/moment';
```
然后在你的根模块（比如app.module.ts）里，只导入你实际需要的语言包并设置默认locale：
```
// 示例：只导入中文语言包
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
```
这样打包时只会包含moment核心和你指定的语言包，其余的都会被排除，完全兼容material-moment-adapter的使用。
用tsconfig路径别名统一处理
如果你不想逐个修改项目里所有组件的导入语句，可以通过tsconfig.json（或tsconfig.app.json）的路径别名来统一指向moment核心：
在compilerOptions里添加如下配置：
```
"compilerOptions": {
  // 其他配置...
  "paths": {
    "moment": ["node_modules/moment/src/moment"]
  }
}
```
之后不管你在组件里写import * as moment from 'moment';还是import moment from 'moment';，都会自动加载moment的核心源码，不会引入全量语言包。同样记得在根模块里按需导入需要的语言包。
额外注意：适配material-moment-adapter
确保你使用的@angular/material-moment-adapter版本和Angular 5匹配（一般是5.x版本），这个版本的adapter不会强制引入全量moment，只要我们全局配置了moment的核心加载，adapter会自动复用这个依赖，不会额外增加体积。