js 让 日期 与 时间 换行_vue使用moment.js经webpack打包后超级大的原因和解决方案...

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。

作者是csdn的一个小博主，今天来知乎首发篇文章试试；不喜勿喷！