ant design - huge imports

问题

I'm using and design library for my react application.

And I've faced with huge imports, that hurts my bundle (currently 1.1 mb in minified version because of ant-design lib).

How can I differently import antd components through all my app?

UPDATE:

Seems antd has some huge or non optimized modules. Here the thing - only difference is import Datepicker module, and.. boom! + almost 2MB (in dev bundle ofc.)

回答1:

At the moment, huge part of antd dist is svg icons.
There is no official way to deal with it yet (check the issue on github).

But a workaround exists.

Adapt webpack to resolve icons differently. In your webpack config:

module.exports = {
  //...
  resolve: {
    alias: {
      "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
    }
  }
};

Create icons.js in the folder src/ or wherever you want it. Be sure it matches the alias path!
In this file you define which icons antd should include.

export {
  default as DownOutline
} from "@ant-design/icons/lib/outline/DownOutline";

It's also possible to do this with react-app-rewire (create-react-app modifications) within config-overwrites.js

回答2:

1) Prevent antd to load the all moment localization. Add webpack plugin and configure it in webpack.config.js like the follow:

plugins: [
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /ru/),
],
resolve: {
    alias: {moment: `moment/moment.js`}
},
target: `web`
}

2) Use the same moment version as in antd library.

3) Use modularized antd Use babel-plugin-import

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
    // `style: true` for less
  ]
}

I use BundleAnalyzerPlugin to analyze the bundle.

plugins: [new BundleAnalyzerPlugin()]

回答3:

Looking at the docs https://ant.design/docs/react/getting-started#Import-on-Demand there is a recommedation to import individual components on demand. So, you can try and replace

import { Button} from 'antd'

with

import Button from 'antd/lib/button'

回答4:

Those few components are certainly not 1.2M together. Looks like you are importing the whole library when you only need a few components.

To get antd to load only the needed modules you should use babel-plugin-import. Check your console log for the "You are using a whole package of antd" warning described at that link.

Check out the docs for Create-React-App for how to implement it if you're using CRA.

回答5:

I reduced my bundle size by 500KB by editing config-override.js like so:

config-override.js

const { override, fixBabelImports } = require('customize-cra');
const path = require('path');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css'
  }),
  // used to minimise bundle size by 500KB
  function(config, env) {
    const alias = config.resolve.alias || {};
    alias['@ant-design/icons/lib/dist$'] = path.resolve(__dirname, './src/icons.js');
    config.resolve.alias = alias;
    return config;
  }
);

./src/icons.js

/**
 * List all antd icons you want to use in your source code
 */
export {
  default as SearchOutline
} from '@ant-design/icons/lib/outline/SearchOutline';

export {
  default as CloseOutline
} from '@ant-design/icons/lib/outline/CloseOutline';

export {
  default as QuestionCircleOutline
} from '@ant-design/icons/lib/outline/QuestionCircleOutline';

export {
  default as PlayCircleOutline
} from '@ant-design/icons/lib/outline/PlayCircleOutline';

export {
  default as PauseCircleOutline
} from '@ant-design/icons/lib/outline/PauseCircleOutline';

export {
  default as LoadingOutline
} from '@ant-design/icons/lib/outline/LoadingOutline';

Before

After

回答6:

Try using code splitting using webpack and react router. It will help you to load the modules asynchronously. This is the only solution helped me to improve the page load time when using ant framework.

来源：https://stackoverflow.com/questions/48721290/ant-design-huge-imports

标签

reactjs

antd