diff --git a/docs/react/faq.en-US.md b/docs/react/faq.en-US.md index 4ae3fbfc7c..66a2f010b3 100644 --- a/docs/react/faq.en-US.md +++ b/docs/react/faq.en-US.md @@ -56,6 +56,10 @@ import { Menu, Breadcrumb, Icon } from 'antd'; See: https://github.com/jmblog/how-to-optimize-momentjs-with-webpack +### How to replace momentjs to Day.js to reduce bundle size? + +We provide `antd-dayjs-webpack-plugin` plugin to replace `momentjs` to `Day.js` directly without changing a line of existing code. More info at [antd-dayjs-webpack-plugin](https://github.com/ant-design/antd-dayjs-webpack-plugin). + ### It doesn't work when I change `defaultValue` dynamically. The `defaultXxxx` (like `defaultValue`) of `Input`/`Select`(etc...) only works on the first render. It is a specification of React. Please read [React's documentation](https://facebook.github.io/react/docs/forms.html#controlled-components). diff --git a/docs/react/faq.zh-CN.md b/docs/react/faq.zh-CN.md index 8c6f504681..96b7e8d8a2 100644 --- a/docs/react/faq.zh-CN.md +++ b/docs/react/faq.zh-CN.md @@ -56,6 +56,10 @@ import { Menu, Breadcrumb, Icon } from 'antd'; 参考:https://github.com/jmblog/how-to-optimize-momentjs-with-webpack 。 +### 如何使用 Day.js 替换 momentjs 来减小打包大小? + +我们提供了 `antd-dayjs-webpack-plugin` 插件,无需对现有代码做任何修改直接替换成 `Day.js`。请参考 [antd-dayjs-webpack-plugin](https://github.com/ant-design/antd-dayjs-webpack-plugin)。 + ### 当我动态改变 `defaultValue` 的时候它并没有生效。 `Input`/`Select` 等的 `defaultXxxx`(例如 `defaultValue`)只有在第一次渲染的时候有效,这是 React 的规范,请阅读 [React 的文档](https://reactjs.org/docs/forms.html#controlled-components)。 diff --git a/docs/react/getting-started.en-US.md b/docs/react/getting-started.en-US.md index a7ad7e0a68..60395ebcb2 100755 --- a/docs/react/getting-started.en-US.md +++ b/docs/react/getting-started.en-US.md @@ -151,6 +151,22 @@ And this plugin can load styles too. Read [usage](https://github.com/ant-design/ > FYI, babel-plugin-import's `style` option will importing some global reset styles, don't use it if you don't need those styles. You can import styles manually via `import 'antd/dist/antd.css'` and override the global reset styles. +## Replace momentjs to Day.js + +You can use [antd-dayjs-webpack-plugin](https://github.com/ant-design/antd-dayjs-webpack-plugin) plugin to replace momentjs to Day.js to reduce bundle size dramatically. You need to update your webpack config file like this: + +```js +// webpack-config.js +import AntdDayjsWebpackPlugin from 'antd-dayjs-webpack-plugin'; + +module.exports = { + // ... + plugins: [ + new AntdDayjsWebpackPlugin() + ] +}; +``` + ## Customization - [Customize Theme](/docs/react/customize-theme) diff --git a/docs/react/getting-started.zh-CN.md b/docs/react/getting-started.zh-CN.md index 13f13c80ca..38b753f69b 100755 --- a/docs/react/getting-started.zh-CN.md +++ b/docs/react/getting-started.zh-CN.md @@ -156,6 +156,22 @@ import { Button } from 'antd'; > 注意,babel-plugin-import 的 `style` 属性除了引入对应组件的样式,也会引入一些必要的全局样式。如果你不需要它们,建议不要使用此属性。你可以 `import 'antd/dist/antd.css'` 手动引入,并覆盖全局样式。 +## 使用 Day.js 替换 momentjs 优化打包大小 + +你可以使用 [antd-dayjs-webpack-plugin](https://github.com/ant-design/antd-dayjs-webpack-plugin) 插件用 Day.js 替换 momentjs 来大幅减小打包大小。这需要更新 webpack 的配置文件如下: + +```js +// webpack-config.js +import AntdDayjsWebpackPlugin from 'antd-dayjs-webpack-plugin'; + +module.exports = { + // ... + plugins: [ + new AntdDayjsWebpackPlugin() + ] +}; +``` + ## 配置主题和字体 - [改变主题](/docs/react/customize-theme) diff --git a/docs/react/use-with-create-react-app.en-US.md b/docs/react/use-with-create-react-app.en-US.md index 8495940daf..6ea2e94d55 100644 --- a/docs/react/use-with-create-react-app.en-US.md +++ b/docs/react/use-with-create-react-app.en-US.md @@ -199,6 +199,25 @@ We use `modifyVars` option of [less-loader](https://github.com/webpack/less-load > You could also try [craco](https://github.com/sharegate/craco) and [craco-antd](https://github.com/FormAPI/craco-antd) to customize create-react-app webpack config same as customize-cra does. +## Replace momentjs to Day.js + +You can use [antd-dayjs-webpack-plugin](https://github.com/ant-design/antd-dayjs-webpack-plugin) plugin to replace momentjs to Day.js to reduce bundle size dramatically. + +```bash +$ yarn add antd-dayjs-webpack-plugin +``` + +```js +const { override, addWebpackPlugin } = require('customize-cra'); +const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin'); + +module.exports = override( + addWebpackPlugin( + new AntdDayjsWebpackPlugin() + ) +); +``` + ## eject You can also eject your application using [yarn run eject](https://facebook.github.io/create-react-app/docs/available-scripts#npm-run-eject) for a custom setup of create-react-app, although you should dig into it by yourself. diff --git a/docs/react/use-with-create-react-app.zh-CN.md b/docs/react/use-with-create-react-app.zh-CN.md index 7dd7c0a3bf..cdb44aec58 100644 --- a/docs/react/use-with-create-react-app.zh-CN.md +++ b/docs/react/use-with-create-react-app.zh-CN.md @@ -201,6 +201,25 @@ module.exports = override( > 你也可以使用 [craco](https://github.com/sharegate/craco) 和 [craco-antd](https://github.com/FormAPI/craco-antd) 来实现和 customize-cra 一样的修改 create-react-app 配置的功能。 +## 使用 Day.js 替换 momentjs 优化打包大小 + +你可以使用 [antd-dayjs-webpack-plugin](https://github.com/ant-design/antd-dayjs-webpack-plugin) 插件用 Day.js 替换 momentjs 来大幅减小打包大小。 + +```bash +$ yarn add antd-dayjs-webpack-plugin +``` + +```js +const { override, addWebpackPlugin } = require('customize-cra'); +const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin'); + +module.exports = override( + addWebpackPlugin( + new AntdDayjsWebpackPlugin() + ) +); +``` + ## eject 你也可以使用 create-react-app 提供的 [yarn run eject](https://facebook.github.io/create-react-app/docs/available-scripts#npm-run-eject) 命令将所有内建的配置暴露出来。不过这种配置方式需要你自行探索,不在本文讨论范围内。