通常我們需要優(yōu)化加載速度的時候，在眾多的優(yōu)化當中，可以使用link代替import，避免過多的import讓加載變慢。那在vue里面應該怎么優(yōu)化尼。國內(nèi)的CDN服務推薦使用 BootCDN，國外還是不要用了.......
運用了webpack4的話是默認有分包的功能的，如果之前下載了那些插件，必須要先把它卸載了
首先在index.html里面把所需要的資源先寫出來，如：
<head>
<link rel="stylesheet" >
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
<!-- built files will be auto injected -->
</body>
在vue.config.js里面加上
module.exports = {
···
···
configureWebpack: {
resolve: {
extensions: ['.js', '.json', '.vue', '.scss', '.css'],
alias: {
···
},
},
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
'Axios':'axios'
}
},
然后修改src/router/index.js
// 注釋掉
// import Vue from 'vue'
import VueRouter from 'vue-router'
// 注釋掉
// Vue.use(Router)
...
修改 src/store/index.js
...
// 注釋掉
// Vue.use(Vuex)
...
最后修改 src/main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import ELEMENT from 'element-ui'
Vue.use(ELEMENT)
import axios from 'Axios'
Vue.prototype.$axios= axios
/* eslint-disable no-new */
new Vue({
el: '#app',
router: router,
store: store,
render: h => h(App)
})
注意，這里 element-ui 變量名要使用 ELEMENT，因為element-ui的 umd 模塊名是 ELEMENT
image.png
