Found the problem

Today, when I was preparing to update my blog after packing and updating files as usual, I found that the home page file was very large after packing. Considering how many modules were not used in the home page, there must be some things that should not be packed in the home page. The webpack-bundle-Analyzer plug-in is used to see the details of the packaged files.

So find

The file has packed the whole @ant-design/ ICONS /lib into it, making the file 500 KB too large for no apparent reason, 145KB even after gzip is enabled.

Originally, I used the Icon component of Antd in my project, which can be seen in the Icon component file

I put the whole @ant-design/ ICONS /lib into the component, so when I package it it’s all Antd and all the fonts are packaged into the file.

How to solve

Solution 1

Import only the Icon files we need in Antd.

Create antdicons.js and export just the Icon file you want from @ant-Design

When Antd is installed, @ant-Design/ICONS are already installed as dependencies, so there is no need to reinstall them.

// antdIcons.js

export {default as MenuOutline} from '@ant-design/icons/lib/outline/MenuOutline';
Copy the code

Then configure webpack’s resolve.alias

Let the address of the incoming packet be resolved to your configured address instead

// webpack config resolve: {alias: {' @ ant - design/ICONS/lib/dist $': path.resolve(__dirname, 'utils/antdIcon.js')}}Copy the code

After configuration we are looking at the output of the packaged Webpack-bundle-Analyzer plug-in

Now it’s just importing the icon we need, which is now a very small part of the file

Solution 2

Instead of using Antd’s Icon component, use Ali IconFONT to select the files you want to introduce iconFONT files into the project.

Matters needing attention

  • Use with the official component load on Demand: Antd Load on Demand
  • Don’t write the wrong path when configuring webpack’s resolve.alias
  • Antdicons.js import icon import notation cannot be written this way
// antdIcons.js

export { MenuOutline } from '@ant-design/icons';
Copy the code

This will prevent tree-shaking when webpack4 is parsed and will end up packing the whole @ant-design/ ICONS inside

  • Note that the icon of Antd has the difference between fill and outline, please check when introducing
  • If the Antd component is used and the Icon component is used, you need to export the Icon required by these components.

Official issues on this issue

antd#12011