Changing imports to reduce bundle size?

I just spent a couple hours tonight trying to figure out why my import on demand per Ant’s docs was not working. Turns out that it was a couple imports from formik-antd.

I wonder if it’s possible for formik-antd to import similarly, e.g. instead of import { Form } from 'antd' you would do import Form from 'antd/lib/form' or import Form from 'antd/es/form'.

Thanks in advance!

[edongashi]

I found the problem. This library has "sideEffects": false whereas ant design has

"sideEffects": [
  "dist/*",
  "es/**/style/*",
  "lib/**/style/*",
  "*.less"
]

Marking all files as side effect free tells webpack to shake off files that have no used tokens (this happens for styles). I will send a PR now.

[claneo]

This is my babel-plugin-import config:

[
  'import',
  {
    libraryName: '@jbuschke/formik-antd',
    style: libraryName => {
      let name = libraryName.replace('@jbuschke/formik-antd/es/', '');
      if (name === 'FormikDebug') return false;
      if (name === 'SubmitButton') name = 'Button';
      name = name[0].toLowerCase() + name.substr(1);
      name = name.replace(/([A-Z])/g, $1 => `-${$1.toLowerCase()}`);
      return `antd/es/${name}/style`;
    },
    libraryDirectory: 'es',
    camel2DashComponentName: false,
    transformToDefaultImport: false,
  },
  'formik-antd',
]

So my suggestion is to use same filename style with antd, and include style entry file, which looks like this:

es
├─date-picker
│ ├─index.js
│ └─style
│   ├─index.js
│   └─css.js
├─form
│ └─...
└─...

style/index.js and style/css.js just import antd/lib/xxx/style and antd/lib/xxx/style/css.js

After doing that, we can use a simple babel-plugin-import config:

[
  'import',
  {
    libraryName: '@jbuschke/formik-antd',
    style: true,
    // or
    // style: 'css',
    libraryDirectory: 'es'
  },
  'formik-antd',
]

@jannikbuschke