首页 > 其他 > 详细

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

时间:2020-07-15 22:03:02      阅读:83      评论:0      收藏:0      [点我收藏+]
JeecgBoot实战 - 按需加载方案
一、Ant-Design-Vue 按需加载
1.创建js文件 src/components/lazy_antd.js
import Vue from vue

// base library
import {
  ConfigProvider,
  Layout,
  Input,
  InputNumber,
  Button,
  Switch,
  Radio,
  Checkbox,
  Select,
  Card,
  Form,
  Row,
  Col,
  Modal,
  Table,
  Tabs,
  Icon,
  Badge,
  Popover,
  Dropdown,
  List,
  Avatar,
  Breadcrumb,
  Steps,
  Spin,
  Menu,
  Drawer,
  Tooltip,
  Alert,
  Tag,
  Divider,
  DatePicker,
  TimePicker,
  Upload,
  Progress,
  Skeleton,
  Popconfirm,
  PageHeader,
  Result,
  Statistic,
  Descriptions,
  message,
  notification,
  Empty,
  Tree,
  TreeSelect
} from ant-design-vue
import Viser from viser-vue

Vue.use(ConfigProvider)
Vue.use(Layout)
Vue.use(Input)
Vue.use(InputNumber)
Vue.use(Button)
Vue.use(Switch)
Vue.use(Radio)
Vue.use(Checkbox)
Vue.use(Select)
Vue.use(Card)
Vue.use(Form)
Vue.use(Row)
Vue.use(Col)
Vue.use(Modal)
Vue.use(Table)
Vue.use(Tabs)
Vue.use(Icon)
Vue.use(Badge)
Vue.use(Popover)
Vue.use(Dropdown)
Vue.use(List)
Vue.use(Avatar)
Vue.use(Breadcrumb)
Vue.use(Steps)
Vue.use(Spin)
Vue.use(Menu)
Vue.use(Drawer)
Vue.use(Tooltip)
Vue.use(Alert)
Vue.use(Tag)
Vue.use(Divider)
Vue.use(DatePicker)
Vue.use(TimePicker)
Vue.use(Upload)
Vue.use(Progress)
Vue.use(Skeleton)
Vue.use(Popconfirm)
Vue.use(PageHeader)
Vue.use(Result)
Vue.use(Statistic)
Vue.use(Descriptions)
Vue.use(Empty)
Vue.use(Tree)
Vue.use(TreeSelect)

Vue.prototype.$confirm = Modal.confirm
Vue.prototype.$message = message
Vue.prototype.$notification = notification
Vue.prototype.$info = Modal.info
Vue.prototype.$success = Modal.success
Vue.prototype.$error = Modal.error
Vue.prototype.$warning = Modal.warning

process.env.NODE_ENV !== production && console.warn([jeecg-boot-vue] NOTICE: Antd use lazy-load.)

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

plugins: [
  [ "import", {
    "libraryName": "ant-design-vue",
    "libraryDirectory": "es",
    "style": "css"
  } ]
]

参考图

技术分享图片
 
3. 修改main.js 引入配置文件 src/components/lazy_antd.js,同时注释掉原来的 ant-design-vue引入。
src/main.js
// 按需引入所需组件,统一引入文件
import ./components/lazy_antd

技术分享图片

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

"babel-plugin-import": "^1.13.0"

技术分享图片

备注: 组件如果有缺少,需手工添加。
参考文献:
 
二、Icon按需加载
1. 创建js文件 src/icons.js
// src/icons.js

// export what you need
export {
  default as SmileOutline
} from @ant-design/icons/lib/outline/SmileOutline;
export {
  default as MehOutline
} from @ant-design/icons/lib/outline/MehOutline;

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

参考图

技术分享图片

备注: 图标如果有缺少,需手工添加。

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

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

原文:https://www.cnblogs.com/jeecg158/p/13307344.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!