peng20017 / antd-dayjs-webpack-plugin

⏰ Day.js webpack plugin for antd

Home Page:https://ant.design/docs/react/use-with-create-react-app-cn#%E4%BD%BF%E7%94%A8-Day.js-%E6%9B%BF%E6%8D%A2-momentjs-%E4%BC%98%E5%8C%96%E6%89%93%E5%8C%85%E5%A4%A7%E5%B0%8F

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

antd-dayjs-webpack-plugin

NPM version

A webpack plugin for Day.js. 一个 Day.js 的 Weppack 插件。

Replace Moment.js with Day.js in antd project in ONE step. Bundle size reduced from 65 kb -> 4.19 kb.

只需一步操作即可使用 Day.js 替换 Moment.js ,打包体积由 65 kb 优化至 4.19 kb。

Name Size Size gzip
Moment.js 231 kb 65.55 kb
Day.js 11.11 kb 4.19 kb
moment dayjs moment dayjs 2kb

Usage 使用方法

  1. Install npm i antd-dayjs-webpack-plugin. 安装 antd-dayjs-webpack-plugin
  2. Add an instance of the plugin to the webpack plugin configuration. 更新 webpack 配置。

Example 示例

// webpack-config.js
import AntdDayjsWebpackPlugin from 'antd-dayjs-webpack-plugin';

module.exports = {
  // ...
  plugins: [
    new AntdDayjsWebpackPlugin()
  ]
};

Configuration 配置

Attribute Description Type Accepted Values Default
plugins plugin name Array[string] all support plugins []
replaceMoment replace moment to dayjs with webpack alias config Boolean true / false false
preset name of preset configuration String 'antd' 'antd'

Notice 说明

  1. Day.js is designed to be immutable, however, in order to make full compatible to moment.js in Antd, we have to use a plugin 🚨 BadMutable 🚨 to make Day.js mutable. This's not good and not what we want, but there's no better option. With this plugin enabled, all setters will update the instance itself.
  • Day.js 被设计成不可变的对象,但是为了完成对 moment.js 的替换,必须要引入一个 🚨 BadMutable 🚨插件让其变成可变对象,这并不是一个好的选择,但为了兼容也没有更好的办法。当使用这个插件后,所有的 setter 都会更新当前实例。
  1. Day.js is a lightweight library with only 2kb size, but we have to use some other plugins to make full compatible to moment.js in Antd, so the final bundle size is 4.19 kb (Still small 😀)
  • Day.js 是一个只有 2kb 的轻量级时间库,但为了完成对 moment.js 和 Antd 代码的替换,我们需要引入一些特殊的插件,这会使最终的体积变成 4.19 kb (但仍然很小呀😀 )