Antdv项目优化

Posted by Youzi Blog on March 26, 2021

antdv-项目打包上的优化

项目使用到的包版本:

注意,在 antdv 的 2.x 版本已经修复了 icon 相关的引入问题;

1
2
3
4
{
  "ant-design-vue": "^1.7.4",
  "vue": "^2.6.11"
}

moment.js 优化

主要参考https://github.com/jmblog/how-to-optimize-momentjs-with-webpack

具体如何操作:

vue.config.js

1
2
3
4
5
6
const ContextReplacementPlugin = require('webpack').ContextReplacementPlugin;
module.exports = {
  configureWebpack: () => {
    return (plugin = [new ContextReplacementPlugin(/moment[/\\]locale$/, /zh\-cn/)]);
  }
};

深入看了下包内部的源码,发现moment.js每次都会全量引入所有的语言包,导致最后打包的结果变大,所以在这里配置只需要引入所需的语言包即可;

icon 按需引入的优化

主要参考https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo

具体操作:建立icon.js文件,这里写需要引入的 icon 组件,得去node_modules依赖里面找,路径都是@ant-design/icons/lib,然后看自己需要的是哪种,antd有三种图标,然后还需要把引入的组件内部的 icon 也引进来,像我用到了日历等等…;找图标这一步比较麻烦,也可以看看异步加载图标库的策略,和用一个插件,详见:https://www.cnblogs.com/fulu/p/13255538.html

GitHub 仓库关于 icon 问题的讨论 issue:https://github.com/ant-design/ant-design/issues/12011

这里用的是手动的方式:

先在目录下建立icon.js

1
2
3
4
5
6
7
8
// export what you need
export { default as UserOutline } from '@ant-design/icons/lib/outline/UserOutline';
export { default as CalendarOutline } from '@ant-design/icons/lib/outline/CalendarOutline';

// export what antd other components need
export { default as LockOutline } from '@ant-design/icons/lib/outline/LockOutline';
export { default as CloseCircleTwoTone } from '@ant-design/icons/lib/twotone/CloseCircleTwoTone';
// and other icons...

vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
  configureWebpack: () => {
    return (resolve = {
      alias: {
        // vue$: "vue/dist/vue.esm.js",
        '@': resolvePath('src'),
        '~': resolvePath('src/api/api'),
        '#': resolvePath('src/components'),
        '@ant-design/icons/lib/dist$': resolvePath('src/utils/icon.js')
      }
    });
  }
};

这边我也看了下源码库,因为antdv是由antd这个库发展来的,所以图标库沿用了antd的,在node_modules\ant-design-vue\es\icon\index.js这个文件里,头部可以看到这样的代码:

1
import * as allIcons from '@ant-design/icons/lib/dist';

可以看到从icon库里引入了所有的 icon,而配置'@ant-design/icons/lib/dist$': resolvePath('src/utils/icon.js')这个,就把这个路径换成了我们自己写的icon.js这个文件了,这个文件做到了按需要的去加载icon

后记

虽然不知道为啥 antd 要用 moment,其实现在 day.js 也挺好用的,而且可以被 webpack 的 tree-shaking 优化;

而关于 icon 的问题呢,在react版本的 antd 里 4.x 就对这个问题进行了优化,在vue版本里 antdv2.x 进行了优化,可以在这里看到:https://2x.antdv.com/docs/vue/migration-v2-cn