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

54次阅读

共计 901 个字符，预计需要花费 3 分钟才能阅读完成。

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

办法有三种，我应用了其中一种应用插件 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…

此办法在 antd 框架内应用后会报出必须要应用 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/),
],
};