3、按需引用ant-design-vue组件

1.引入依赖 注意版本号

dependencies

1. "babel-plugin-import-resolve": "0.0.5"
   

devDependencies

1. "less": "^2.7.3"

2. "less-loader": "^5.0.0"

3. "babel-plugin-import": "^1.12.1"

最后的依赖是这样的

package.json

"dependencies": {
    "ant-design-vue": "^1.3.16",
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "babel-plugin-import-resolve": "0.0.5"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "babel-eslint": "^10.0.1",
    "babel-plugin-import": "^1.12.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10",
    "less": "^2.7.3",
    "less-loader": "^5.0.0"
  },

babel.config.js

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    [
      "import",
      { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
    ]
  ]
}

新增了一个文件在文件夹core下

在main.js中引用文件

main.js

import Vue from 'vue'
import App from './App.vue'
import './core/demand-loading' // 引入按需加载的组件
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

最后对比一下，按需加载和全部加载的优势吧

全部加载：

按需加载：

总体的加载速度还是快了

 

 

2019-09-03

如果在新建项目的时候 npm install 卡在extract:rxjs: sill extract 可以用cnpm