When USING antdV, I found that even if the on-demand import of components was configured, the package was still very large after packaging. Then I looked up the data and found that the problem was the icon file. If the on-demand import of ICONS was also configured, the packaging result could be reduced by nearly half

Remember to have webpack and Webpack-CLI installed. The author of this article recommends using webpack4.x, the 5.x version will cause problems

Vue:

1. Configure the following contents in vue.config.js:

const path = require('path')

module.exports = {
    configureWebpack: {        resolve: {
            alias: {
                '@ant-design/icons/lib/dist': path.resolve(__dirname, 'src/antdIcon.js'
            )
        }
    }}
Copy the code

2. Add antdicon. js to the SRC directory to add ICONS

The import CloseOutline from '@ ant - design/ICONS/lib/outline/CloseOutline'/icon export/import need {} CloseOutline / / export iconCopy the code

Nuxt: The Nuxt configuration is not much different from that of Vue. Note that Nuxt requires the extend configuration in the build of nuxt.config.js:

extend (config, ctx) {  
    config.resolve.alias['@ant-design/icons/lib/dist$'] = path.resolve(__dirname, 'plugins/antdIcons.js')  
}
Copy the code