JeecgBoot實戰(zhàn) - 按需加載方案

文章目錄

• JeecgBoot實戰(zhàn) - 按需加載方案
• • 一、Ant-Design-Vue 按需加載
  • 二、Icon按需加載

一、Ant-Design-Vue 按需加載

1.創(chuàng)建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.warningprocess.env.NODE_ENV !== 'production' && console.warn('[jeecg-boot-vue] NOTICE: Antd use lazy-load.')

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

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

參考圖

修改main.js 引入配置文件 src/components/lazy_antd.js，同時注釋掉原來的 ant-design-vue引入。

src/main.js

// 按需引入所需組件，統(tǒng)一引入文件 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按需加載

創(chuàng)建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...

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

.set('@ant-design/icons/lib/dist$',resolve("src/icons.js"))

參考圖

備注： 圖標如果有缺少，需手工添加。

參考文獻: https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo

總結(jié)

以上是生活随笔為你收集整理的Ant-Design-Vue和Icon按需加载方案 - JeecgBoot实战的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。