按需加載@減小打包 · JeecgBoot 開發文檔

按需加載減小打包 ==== ## 按需引入組件依賴 `Ant Design Pro Vue` 默認編碼工作并不支持按需引入，不過可以通過以下操作結合 [Ant Design Of Vue](https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/) 官方文檔來進行按需引入。 - 增加項目按需引入依賴 - 修改引入組件方式 1. 增加按需引入所需依賴 `babel-plugin-import` 并且修改文件 `babel.config.js` ```ecmascript 6 module.exports = { presets: [ '@vue/app' ], plugins: [ [ "import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" } ] ] } ``` 2. 修改引入組件方式 (注意，這只是一個例子，請完整引入你所需要的組件) 文件 `@/components/use.js` ```javascript import Vue from 'vue' import { Input, Button, Select, Card, Form, Row, Col, Modal, Table, notification } from 'ant-design-vue' Vue.use(Input) Vue.use(Button) Vue.use(Select) Vue.use(Card) Vue.use(Form) Vue.use(Row) Vue.use(Col) Vue.use(Modal) Vue.use(Table) Vue.use(notification) Vue.prototype.$notification = notification; ``` 3. 最后在 `main.js` 中引入 `@/components/use.js` 文件即可，如下 ```javascript import Vue from 'vue' import App from './App' // 引入按需組件的統一引入文件 import './components/use' import './style/index.less' Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') ``` **參考資料示例** [完整組件列表](https://github.com/vueComponent/ant-design-vue/blob/master/components/index.js) [ant-design-vue 按需加載](https://www.antdv.com/docs/vue/getting-started-cn/#%E6%8C%89%E9%9C%80%E5%8A%A0%E8%BD%BD) [相關文檔](https://github.com/sendya/ant-design-pro-vue/tree/1.3.2/docs) [feature/demand_load](https://github.com/sendya/ant-design-pro-vue/tree/feature/demand_load) ## 其他減少打包大小 1. Ant Design Vue 1.2.x 版本起，采用的 ant-design 官方方案 svg Icon 組件，整個項目打包會變大很多，圖標進行按需加載可參考： https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo 2. moment 按需加載可參考： https://github.com/jmblog/how-to-optimize-momentjs-with-webpack