通常我们需要优化加载速度的时候，在众多的优化当中，可以使用link代替import，避免过多的import让加载变慢。那在vue里面应该怎么优化尼。国内的CDN服务推荐使用 BootCDN，国外还是不要用了.......
运用了webpack4的话是默认有分包的功能的，如果之前下载了那些插件，必须要先把它卸载了
首先在index.html里面把所需要的资源先写出来，如：
<head>
<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css">
</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
网友评论