webpack 按需加载 moment 时区设置

发表于 | 更新于 | 分类于 | | 阅读次数：

问题

在前端开发中引入了 moment.js 后发现 webpack 打包出来的 moment 依赖包括了许多不需要的 locale 文件。其中光 locale 文件就占了总大小的 70% ，可以说对打包出来的文件体积影响很大。因此我们需要对 moment 的 locale 文件进行按需打包。

示例:

webpack-dynamic-import-moment-locale-before

解决

webpack 提供了一个上下文替换插件(ContextReplacementPlugin)，允许覆盖查找规则，通过正则筛选指定的文件。

只需要在 webpack 的配置文件 plugins 处增加如下代码即可:

1
2
3
4
5
6
plugins: [
  new webpack.ContextReplacementPlugin(
    /moment[/\\]locale$/,
    /zh-cn/,
  ),
],

这里通过正则匹配了 moment/locale 下的名为 zh-cn 的文件。之后再打包引用大小减少了 70% 多，效果如图所示。

webpack-dynamic-import-moment-locale-after

参考资料: