96 lines
2.0 KiB
Markdown
96 lines
2.0 KiB
Markdown
按需加载 减小打包
|
|
====
|
|
|
|
|
|
|
|
## 按需引入组件依赖
|
|
|
|
`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. 修改引入组件方式 (注意，这只是一个例子，请完整引入你所需要的组件)
|
|
|
|
文件 `@/core/lazy_lib/component_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` 中引入 `@/core/lazy_use.js` 文件即可，如下
|
|
|
|
```javascript
|
|
|
|
import Vue from 'vue'
|
|
import App from './App'
|
|
|
|
// 引入 按需组件的统一引入文件
|
|
import './core/lazy_use'
|
|
|
|
import './style/index.less'
|
|
|
|
|
|
Vue.config.productionTip = false
|
|
|
|
new Vue({
|
|
render: h => h(App),
|
|
}).$mount('#app')
|
|
|
|
```
|
|
|
|
|
|
|
|
## 其他 减少打包大小
|
|
|
|
|
|
|
|
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
|