关于ant-design-vue使用的优化配置

目前在项目中使用了ant-design-vue组件库，官方有对其配置按需加载功能，但是在实际使用用过程中，很多没有使用的组件还是被打包进了项目，主要集中在@ant-design/icons、moment上，占用了很大的体积

先配置组件的按需加载功能

yarn add babel-plugin-import -D


module.exports = {
  presets: [
    [
      '@vue/cli-plugin-babel/preset',
      { useBuiltIns: 'entry', modules: 'commonjs' }
    ]
  ],
  plugins: [
    
    [
      'import',
      { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' },
      'ant-design-vue'
    ],
    
    'lodash'
  ]
}

我们先上图看看不做处理的情况下的大小：

moment插件

image

@ant-design/icons

image

现在开始着手解决这些冗余的代码

moment处理方式：

1、在vue.config.js中使用externals配置排除掉moment

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

结果代码运行报错，提示找不到moment,应该是ant-design-vue中有强依赖该插件，所以这个处理方式走不通，然后度娘了一下，找到了可以通过webpack中自带的插件减小引用文件的体积

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

image

对比Gzip下体积减少了50KB,效果非常明显

@ant-design/icons处理方式：

目前官方已经在着手解决字体图标的按需加载功能，具体时间未知

我们先看看广大网友给出的一个很实用的解决方式吧

第一步：在项目中新建一个文件js文件

export { default as DoubleRightOutline } from '@ant-design/icons/lib/outline/DoubleRightOutline'
export { default as DoubleLeftOutline } from '@ant-design/icons/lib/outline/DoubleLeftOutline'


export {}

第二步：在vue.config.js中配置

const path = require('path')
module.exports = {
    ...
    configureWebpack:{
        ...
        resolve:{
            alias: {
                '@ant-design/icons/lib/dist$': path.resolve(__dirname,'./src/tools/icons.js')  // 自建的文件的相对路径
            }
        }
    }
    
}

我的项目中没有使用@ant-design/icons,所以build之后就看不到这个模块了，最终的结果如下：

image

对比一下处理前后的整体项目的Gzip模式下的实际效果：

处理前：

image

处理后：

image

项目整体的大小减少了一半，

顺便在提醒一下，如果项目中没有使用loadsh,但是依赖的npm包中有使用，最好在项目中安装一下loadsh的按需引入配置，你会发现体积又变小了一点，可能是某些npm依赖中全部引入loadsh