如何从主打包文件中移除moment非必需locale包

一、移除Moment.js冗余Locale文件 #

方法1：使用Webpack ContextReplacementPlugin（推荐） #

通过自定义Webpack规则，仅保留所需的fr locale：

1. 安装自定义Webpack构建器：

npm install @angular-builders/custom-webpack --save-dev

2. 在项目根目录创建custom-webpack.config.js：

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.ContextReplacementPlugin(
      /moment[\/\\]locale$/,
      /fr/
    )
  ]
};

3. 修改angular.json的构建配置，替换默认builder：
   找到projects -> [你的项目名] -> architect -> build，更新为：

"builder": "@angular-builders/custom-webpack:browser",
"options": {
  "customWebpackConfig": {
    "path": "./custom-webpack.config.js"
  },
  // 保留原有其他配置
}

4. 在代码中手动引入并激活locale：

import moment from 'moment-timezone';
import 'moment/locale/fr';

moment.locale('fr');

方法2：使用moment-locales-webpack-plugin插件 #

1. 安装插件：

npm install moment-locales-webpack-plugin --save-dev

2. 在custom-webpack.config.js中配置：

const MomentLocalesPlugin = require('moment-locales-webpack-plugin');

module.exports = {
  plugins: [
    new MomentLocalesPlugin({
      localesToKeep: ['fr']
    })
  ]
};

后续步骤同方法1，修改angular.json的builder配置即可。

二、解决moment-timezone编译错误 #

针对报错提示，按以下步骤修复：

1. 修改tsconfig.json的编译选项：
   在compilerOptions中添加：

"allowSyntheticDefaultImports": true,
"esModuleInterop": true

2. 调整导入语句：
   将原导入方式：

import * as moment from 'moment-timezone';

改为默认导入：

import moment from 'moment-timezone';

3. （可选）若配置了tsconfig.json的paths，确保路径正确：

"paths": {
  "moment": ["./node_modules/moment-timezone"]
}

完成以上配置后，重新执行ng build --prod即可正常编译，同时打包文件仅包含所需的fr locale，消除冗余体积。

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