关于javascript:Antd-momentjs打包体积优化之路

背景：CR 时候有共事提出倡议，能够用 day.js 替换 moment.js，能够实现 200k->20k 的逾越优化，前面也会提到具体实现及坑

moment.js 打包体积优化解决办法

一、应用 day.js 替换 moment.js

办法有三种，我应用了其中一种应用插件 antd-dayjs-webpack-plugin 间接在打包时候转换。其余办法详见 antd 给出的办法：https://ant.design/docs/react…

// webpack-config.js
import AntdDayjsWebpackPlugin from 'antd-dayjs-webpack-plugin';

module.exports = {
  // ...
  plugins: [new AntdDayjsWebpackPlugin()],
};

注：然而这个办法会造成如下图这个问题！

此插件的 issues 也有同学遇到这个问题了，临时没有解决办法，issues 详见：https://github.com/ant-design…

二、间接应用 dayjs

此办法在 antd 框架内应用后会报出必须要应用 moment 类型的谬误，故也放弃这种办法

三、间接优化 moment 的打包体积

这个办法也是最初决定用并且无 bug 的一个办法
步骤如下：

• 间接应用 webpack 的ContextReplacementPlugin办法，疏忽 moment 包中的其余无用的 locale，只留下中文的 locale

  const webpack = require('webpack');
  module.exports = {
  //...
  plugins: [
    // load `moment/locale/ja.js` and `moment/locale/it.js`
    new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn/),
  ],
  };

• 打包体积的比照
  

疏忽打包还有个办法：IgnorePlugin，与下面写到的办法稍有不同，详见：https://github.com/jmblog/how…
能够看到 locale 包都被忽略了，达到了缩小了打包体积的目标