Ant-Design-Vue和Icon按需加载方案 - JeecgBoot实战

zhangdaiscott

JeecgBoot实战 - 按需加载方案

一、Ant-Design-Vue 按需加载

1.创建js文件 src/components/lazy_antd.js

2. 修改配置文件 babel.config.js增加插件配置

参考图

3. 修改main.js 引入配置文件 src/components/lazy_antd.js，同时注释掉原来的 ant-design-vue引入。
src/main.js

4. package.json引入依赖babel-plugin-import

参考文献：
https://github.com/vueComponent/ant-design-vue-pro/blob/1.2.0/docs/load-on-demand.md
https://www.antdv.com/docs/vue/getting-started-cn/#按需加载

二、Icon按需加载
1. 创建js文件 src/icons.js


2.修改配置文件 vue.config.js
在 chainWebpack: (config) => { config.resolve.alias 新增一个配置

参考图

备注： 图标如果有缺少，需手工添加。

参考文献: https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo