背景:CR的时候有同事建议可以将moment.js换成day.js,可以实现200k->20k的跨越式优化,具体实现和坑会后面会提到moment.js打包体积优化方案1.将moment.js替换为day.js的方式有3种,我用的是其中一种,打包时直接使用插件antd-dayjs-webpack-plugin进行转换。其他方法见antd给出的方法:https://ant.design/docs/react...//webpack-config.jsimportAntdDayjsWebpackPluginfrom'antd-dayjs-webpack-plugin';module.exports={//...插件:[newAntdDayjsWebpackPlugin()],};注意:但是这种方法会导致下面的问题!有同学在这个插件的issues中遇到过这个问题。暂时没有解决办法。具体可以参考:https://github.com/ant-design...2.直接使用dayjs。这个方法在antd框架中使用后会报错必须使用moment类型,所以这个方法也被放弃了。3.直接优化当下的打包体积。这个方法也是最后决定使用的方法,没有bug。步骤如下:直接使用webpack的ContextReplacementPlugin方法,忽略moment包。其他没用的语言环境,只有中文语言环境constwebpack=require('webpack');module.exports={//...plugins:[//load`moment/locale/ja.js`和`moment/locale/it.js`newwebpack.ContextReplacementPlugin(/moment[/\\]locale$/,/zh-cn/),],};还有一个忽略打包体积比较的方法:IgnorePlugin,和上面写的一样方法略有不同,见:https://github.com/jmblog/how...可以看到localepackage被忽略,达到减少打包体积的目的
