vue-cli 4最適化Ant Design Vue

オンデマンド・ロード
babel.config.js

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
  	[
      'import',
      { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true }
    ]
  ]
}

互換性ie 10
babel.config.js

module.exports = {
  presets: [
    '@vue/app',
    [
      '@babel/preset-env',
      {
        corejs: 3,
        useBuiltIns: 'entry'
      }
    ]
  ],
}

package.json

{
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 9"
  ],
}

vue.config.js

module.exports = {
  //       babel-loader       node_modules     。        Babel         ，           。
  transpileDependencies: ['strip-ansi', 'ismobilejs'],
}

iconsファイルの最適化
vue.config.js

chainWebpack(config) {
    config.resolve.alias
	  .set('@ant-design/icons/lib/dist$', resolve('./src/plugins/icons.js'))
}

src/plugins/icons.js

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

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

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

私のプロジェクトではloading,left,rightの3つのiconしか使わないので、iconsにこの3つを導入するだけでいいです.このようにパッケージを終了すると、ファイルのサイズは明らかに100 kb以上少なくなりました.