vue使用moment.js经webpack打包后超级大的原因和解决方案
Moment.js 是一个 JavaScript 日期处理类库,用于解析、检验、操作、以及显示日期,使用起来十分方便。但是它经过webpack打包之后会变得十分的大。我们做一下对比:测试版本:“moment”: “^2.17.1”,没import moment from 'moment';前webpack打出来的index.js包:js/chunk/index/index.eb9cbc...
Moment.js 是一个 JavaScript 日期处理类库,用于解析、检验、操作、以及显示日期,使用起来十分方便。
但是它经过webpack打包之后会变得十分的大。
我们做一下对比:
测试版本:“moment”: “^2.17.1”,
没import moment from 'moment';
前
webpack打出来的index.js包:
js/chunk/index/index.eb9cbc45.js 135 KiB index/index [emitted] index/index
在import moment from 'moment’;
后
webpack打出来的index.js包:
js/chunk/index/index.f456a5e9.js 376 KiB index/index [emitted] [big] index/index
简直不敢相信,这么一个时间组件竟然有241Kb之大;我滴天!
原因:
moment会将所有本地化内容和核心功能一起打包(见该 GitHub issue)
解决方案:
使用 IgnorePlugin 在打包时忽略本地化内容(webpack.config.js):
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
之后再打包:
js/chunk/index/index.246ad4b7.js 186 KiB index/index [emitted] index/index
这个方案可以明显减少 208Kb
总的来说,我引用moment.js这个组件的话就会将index.js这个包增大51Kb;我内心是十分不爽的,毕竟我网站用到的只是这个组件很小的一个功能;所以我决定不用它,转而使用date-fns
那么我们来看看单独import format from 'date-fns/format’
后的包大小吧:
js/chunk/index/index.04f2719f.js 146 KiB index/index [emitted] index/index
date-fns总的来说只是增大了index.js这个包11Kb;所以这次我选择了date-fns
更多推荐
所有评论(0)