Use babel-plugin-import (recommended).

// .babelrc or babel-loader option
{
  "plugins": [["import", {
      "libraryName": "antd"."libraryDirectory": "es"."style": "css" // `style: true'less file will load}]]}Copy the code

You can then simply import modules from ANTD, without importing styles separately. Implementation of load on demand, will only load the components of js and CSS, load on demand mode is in. Babel configuration

// babel-plugin-import will help you load JS and CSS import {DatePicker} from'antd';
Copy the code

It’s just a simplification. I don’t have to write it this way

import Button from 'antd/lib/button';
Copy the code

2.externals

Externals determines which mode is used to load the additional packages that are introduced

After externals, antD can import the whole CDN (script tag) without using babel-plugin-import. If babel-plugin-import is used, externals will be set differently. Must be set as a separate component of ANTD, such as:

externals{
 'antd/lib/table': 'antd.Table'
}
Copy the code

Packages specified in externals will not be packaged after separation

External using a third-party CDN does not reduce the overall size, or even the size of JS loading is larger, but can reduce the traffic of your server. If you care about the overall size, you should use CommonsChunk or DllPlugin

Ps: What is a CDN?

The role of CDN (Content delivery Network) is to speed up the network transmission, by deploying resources to the server, to speed up the acquisition of resources. Currently, the CDN used is mainly the free CDN service of the front-end open source project supported and maintained by Bootstrap Chinese Website.

3. Use webpack.optimize.Com monsChunkPlugin compression JS file

But this is not optimized for ANTD, but for the overall size of the project

CommonsChunkPlugin

It is mainly used to extract third-party libraries and public modules to avoid the large volume of the bundle files loaded on the first screen or the bundle files loaded on demand, which may lead to a long loading time. It is really a sharp tool for optimization.

Components that are not used on the first screen are loaded asynchronously and chunk is set in webpack