针对ant-design-vue优化

[jiangshanmeta]

按需加载

按照文档安装babel-plugin-import。

在babel.config.js中做如下设置

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset',
    ],
    plugins: [
        [
            'import', {
                libraryName: 'ant-design-vue',
                libraryDirectory: 'es',
                style: 'css',
            },
        ], // `style: true` 会加载 less 文件
    ],
};

然后引入文件：

import Vue from 'vue';
import {
    Button
} from 'ant-design-vue';
Vue.use(Button);

moment

ant-design-vue使用了moment这个库，moment这个库默认打包了所有的语言包，但实际上我们只需要中文。

在vue.config.js中

configureWebpack (config) {
    // 干掉语言包
    config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));
},

然后我们需要在main.js或者App.vue中

// 引入中文语言包
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');

icon

引入Icon组件后，所有的icon图表都会被打包，但是我们的场景下用到的icon只有那几个。

在vue.config.js中

configureWebpack (config) {
    config.resolve.alias['@ant-design/icons/lib/dist$'] = path.join(__dirname, 'src/icons.js');
},

这样解析icon文件，就不在node_modules/@ant-design/icons/lib/下查找，而是在icons.js中查找。

在icons.js文件中，我们手动引入需要的icon

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

export {
    default as CheckCircleFill,
} from '@ant-design/icons/lib/fill/CheckCircleFill';

注意这么做会把其他组件(如message、confirm)用到的icon也干掉，需要手动检查一遍。