Webpack 打包忽略 moment.js 的语言包

FreeGuideOnline 最新 2026-07-05

Webpack 打包忽略 moment.js 语言包

moment.js 是处理日期时间的流行库，但它默认会加载所有语言包（约 200+ 种），导致打包体积大幅增加。如果你的项目只需要特定语言（例如中文），可以通过 Webpack 配置忽略多余的语言包，从而减小输出文件的大小。

为什么需要忽略语言包

moment.js 的 NPM 包默认在入口处通过 require('./locale/' + name) 的方式动态加载所有 locale 文件。当 Webpack 打包时，会将这些 locale 文件全部打包进去，即使你只用到了 moment.locale('zh-cn')，其他语言文件仍然会出现在最终构建产物中，造成不必要的体积浪费。

方法一：使用 IgnorePlugin（推荐）

Webpack 内置的 IgnorePlugin 可以阻止符合特定正则表达式的模块被引入。

配置步骤

在 webpack.config.js 中添加插件：

const webpack = require('webpack');

module.exports = {
  // ... 其他配置
  plugins: [
    new webpack.IgnorePlugin({
      resourceRegExp: /^\.\/locale$/,
      contextRegExp: /moment$/,
    }),
  ],
};

resourceRegExp：针对 moment 源码中 require('./locale/' + name) 的路径进行匹配，即 ./locale。
contextRegExp：限定只在 moment 模块的上下文中生效，避免误伤其他库。

这样打包时，moment 的所有语言包都会被忽略。但此时你的应用将只包含英文 locale，如果需要支持其他语言，还需要手动引入需要的语言包。

手动加载需要的语言

在你的应用入口文件（如 src/index.js）中，按需引入：

import moment from 'moment';
import 'moment/locale/zh-cn';

moment.locale('zh-cn'); // 设置为中文

方法二：使用 ContextReplacementPlugin

该插件可以重写 Webpack 在解析 require 表达式时的上下文，从而限制加载的文件范围。

配置示例

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn|en-gb/),
  ],
};

第一个参数：匹配 moment 下的 locale 目录。
第二个参数：正则表达式，只允许匹配的语言文件被包含。上例中只保留 zh-cn 和 en-gb。

使用此方法后，你甚至不需要手动 import 'moment/locale/zh-cn'，因为语言文件已被保留在构建产物中，moment 的动态加载依然有效（前提是你调用了 moment.locale('zh-cn')）。

方法三：使用 moment-locales-webpack-plugin

这是一个专门解决此问题的第三方插件，本质上也是对 IgnorePlugin 或 ContextReplacementPlugin 的封装，但配置更加直观。

安装

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

使用

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

module.exports = {
  plugins: [
    new MomentLocalesPlugin({
      localesToKeep: ['zh-cn'], // 只保留中文
    }),
  ],
};

该插件会自动处理 locale 的过滤，无需手动执行 import moment/locale/...。

验证打包体积是否减少

完成配置后，可以对比前后的打包体积变化：

在项目中使用 webpack --json > stats.json 生成依赖分析文件。
使用 webpack-bundle-analyzer 或直接查看构建输出的 Chunk 体积。
观察 moment 所在 Chunk 是否不再包含大量 locale 文件。

如果你使用的是 create-react-app 或 vue-cli 等脚手架，可以通过修改其内部的 Webpack 配置实现。例如在 vue.config.js 中：

const webpack = require('webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.IgnorePlugin({
        resourceRegExp: /^\.\/locale$/,
        contextRegExp: /moment$/,
      }),
    ],
  },
};

常见问题

Q：忽略后日期格式化显示英文怎么办？
确保已手动引入并设置为所需语言，例如 moment.locale('zh-cn')。

Q：是否可以同时保留多个语言？
可以，在手动引入时多次 import，或在使用 ContextReplacementPlugin 时使用 /zh-cn|ja|ko/ 正则匹配多个语言。

Q：处理后的包体积能减小多少？
通常可以减少约 200~300 KB（未压缩），这对于前端性能是显著的提升。

通过上述任一方法，你都可以轻松去除 moment.js 中不必要的语言包，让打包结果更加轻量。推荐优先使用 IgnorePlugin 或 ContextReplacementPlugin，它们是 Webpack 原生支持且零额外依赖的方案。