Antd moment.js打包体积优化之路

丞汁

背景: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的一个方法
步骤如下:

  • 直接使用webpackContextReplacementPlugin方法,忽略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包都被忽略了,达到了减少了打包体积的目的

阅读 591
1 声望
0 粉丝
0 条评论
1 声望
0 粉丝
文章目录
宣传栏