About the optimized configuration of Ant Design Vue

Time:2021-7-25

Currently used in the projectant-design-vueThe component library is officially configured with on-demand loading function, but in the actual use process, many unused components are still packaged into the project, mainly focusing on@ant-design/iconsmomentIt takes up a lot of volume

Configure the on-demand loading function of the component first

<!-- Install on demand plug-ins -- >
yarn add babel-plugin-import -D

<!-- babel.config.js -->
module.exports = {
  presets: [
    [
      '@vue/cli-plugin-babel/preset',
      { useBuiltIns: 'entry', modules: 'commonjs' }
    ]
  ],
  plugins: [
    <!-- Ant Design Vue load on demand configuration -- >
    [
      'import',
      { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' },
      'ant-design-vue'
    ],
    <!-- Lodash load on demand configuration -- >
    'lodash'
  ]
}

Let’s first look at the size without processing in the figure above:

Moment plug-in
About the optimized configuration of Ant Design Vue

@ant-design/icons
About the optimized configuration of Ant Design Vue

Now let’s start addressing these redundant codes

Moment processing method:

1. Invue.config.jsUsed inexternalsConfiguration exclusionmoment

module.exports = {
    ...
    configureWebpack:{
        externals:['moment']
    }
    
}

As a result, the code runs with an error, indicating that it cannot be foundmoment, it should beant-design-vueThere is a strong dependence on the plug-in in, so this processing method can’t work. Then Du Niang looks for it and finds it to passwebpackThe built-in plug-in in reduces the volume of referenced files

const webpack = require('webpack')
module.exports = {
    ...
    configureWebpack:{
        ...
        plugins:[
            new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn/)
        ]
    }
    
}

About the optimized configuration of Ant Design Vue

contrastGzipLower volume reduced50KB, the effect is very obvious

@Ant Design / icons processing method:

At present, the official has started to solve the on-demand loading function of font icons, and the specific time is unknown

Let’s take a look at a very practical solution given by the majority of netizens

Step 1: create a new JS file in the project

<!--icons.js-->

<!-- If the font icon of @ ant design needs to be used in the project -- >
export { default as DoubleRightOutline } from '@ant-design/icons/lib/outline/DoubleRightOutline'
export { default as DoubleLeftOutline } from '@ant-design/icons/lib/outline/DoubleLeftOutline'

<!-- Not used -- >
export {}

Step 2: invue.config.jsMedium configuration

const path = require('path')
module.exports = {
    ...
    configureWebpack:{
        ...
        resolve:{
            alias: {
                '@ant-design/icons/lib/dist$': path.resolve(__ Dirname, '. / SRC / tools / icons. JS') // relative path of self created file
            }
        }
    }
    
}

Not used in my project@ant-design/iconsTherefore, you can’t see this module after build. The final results are as follows:

About the optimized configuration of Ant Design Vue

Compare the overall project before and after processingGzipActual effect in mode:

Before treatment:

About the optimized configuration of Ant Design Vue

After treatment:

About the optimized configuration of Ant Design Vue

The overall size of the project has been reduced by half,

By the way, if it is not used in the projectloadsh, but dependentnpmIt is used in the package. It is best to install it in the projectloadshYou will find that the volume of the on-demand configuration is a little smaller, which may be all introduced in some NPM dependenciesloadsh