按需加载@减小打包
最后更新于：2022-04-02 07:15:10
按需加载 减小打包
====
## 按需引入组件依赖
`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
';