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


参考资料: