Ant-Design-Vue和Icon按需載入方案 - JeecgBoot實戰
阿新 • • 發佈:2020-07-15
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"
備註: 元件如果有缺少,需手工新增。參考文獻: 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
// 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