阅读 517

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

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

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

<!--安装按需引入插件-->
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按需加载配置-->
    [
      'import',
      { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' },
      'ant-design-vue'
    ],
    <!--lodash按需加载配置-->
    'lodash'
  ]
}

复制代码

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

moment插件

@ant-design/icons

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

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/)
        ]
    }
    
}
复制代码

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

@ant-design/icons处理方式:

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

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

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

<!--icons.js-->

<!--如果项目中需要使用@ant-design的字体图标的情况-->
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之后就看不到这个模块了,最终的结果如下:

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

处理前:

处理后:

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

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

文章分类
前端
文章标签