vue-cli4 优化之 Ant Design Vue

按需加载

babel.config.js

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

兼容 ie10

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 三个 icon，所以只需在 icons 里引入这三个即可。这样打完包，文件大小明显少了一百多 kb。