目前在名目中应用了ant-design-vue组件库，民间有对其配置按需加载性能，然而在理论应用用过程中，很多没有应用的组件还是被打包进了名目，次要集中在@ant-designicons、moment上，占用了很大的体积

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

<!--装置按需引入插件-->yarn add babel-plugin-import -D<!-- babel.config.js -->module.exports = {  presets: [    [      '@vuecli-plugin-babelpreset',      { useBuiltIns: 'entry', modules: 'commonjs' }    ]  ],  plugins: [    <!--ant-design-vue按需加载配置-->    [      'import',      { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' },      'ant-design-vue'    ],    <!--lodash按需加载配置-->    'lodash'  ]}
咱们先上图看看不做解决的状况下的大小：
moment插件
@ant-designicons
当初开始着手解决这些冗余的代码
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-designicons解决形式：
目前民间曾经在着手解决字体图标的按需加载性能，具体工夫未知
咱们先看看宽广网友给出的一个很实用的解决形式吧
第一步：在名目中新建一个文件js文件
<!--icons.js--><!--如果名目中须要应用@ant-design的字体图标的状况-->export { '须要应用的字体图标组件' } from '@ant-designicons'<!--不应用的状况-->export {}
第二步：在vue.config.js中配置
const path = require('path')module.exports = {    ...    configureWebpack:{        ...        resolve:{            alias: {                '@ant-designiconslibdist$': path.resolve(__dirname,'.srctoolsicons.js')   自建的文件的相对路径            }        }    }    }
我的名目中没有应用@ant-designicons,所以build之后就看不到这个模块了，最终的后果如下：
比照一下解决前后的整体名目的Gzip模式下的实际效果：
解决前：
解决后：
名目整体的大小缩小了一半，????????????
顺便在揭示一下，如果名目中没有应用loadsh,然而依赖的npm包中有应用，最好在名目中装置一下loadsh的按需引入配置，你会发现体积又变小了一点，可能是某些npm依赖中全副引入loadsh