vue項(xiàng)目中用cdn優(yōu)化的方法
在我們寫(xiě)項(xiàng)目中，優(yōu)化問(wèn)題是不容忽視的，尤其是首屏優(yōu)化更是重中之重，這里介紹兩種方法優(yōu)化方法—-cdn和異步加載，異步請(qǐng)看 http://m.fzitv.net/article/110661.htm
1。cdn
首先cdn是什么，自己百度哦
其作用是：當(dāng)我們加載頁(yè)面時(shí)，需要將我們所需要的一些依賴加載到當(dāng)前會(huì)話中然后再開(kāi)始執(zhí)行，如果我們首屏，模塊比較多是，需要等待的時(shí)間會(huì)比較長(zhǎng)，而且。瀏覽器內(nèi)存最多執(zhí)行四十個(gè)進(jìn)程，需要等到加載完前面的才能執(zhí)行后面的代碼，如果我們采用cdn的方式來(lái)引入一些第三方資源，就可以緩解我們服務(wù)器的壓力，原理是將我們的壓力分給其他服務(wù)器點(diǎn)。下面是代碼的具體實(shí)現(xiàn)：
（1）首先是引入資源，這里用的是bootstrap提供的資源， 你可以登錄官網(wǎng)進(jìn)入查看哦，網(wǎng)址：http://www.bootcdn.cn/
vue在最外層的index.js文件中引入，引入如下
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
然后項(xiàng)目中需要改的地方是bulid文件夾下面的webpack.base.conf.js文件，改的地方為
module.exports = {
entry: {
app: './src/main.js'
},
externals:{
'BMap': 'BMap',
'vue': 'Vue',
'vue-router': 'VueRouter'
},
這里需要將vue和vue-router公開(kāi)出去，供全局使用，這里小寫(xiě)的vue和vue-router是我們引入資源時(shí)對(duì)應(yīng)的名字，冒號(hào)后面大寫(xiě)的名字是我們自己定義的名字和項(xiàng)目中要使用的名字，當(dāng)然這兩個(gè)名字可以一樣，接下來(lái)就是將我們項(xiàng)目中引用對(duì)應(yīng)資源的地方將原先的引入方式去掉，也就是我們?cè)扔胕mport引入的，例如main.js和router文件夾下的index.js修改：
// import Vue from 'vue'
// import Vue from 'vue' // import VueRouter from 'vue-router'
注意將router文件夾下的index.js修改
export default new VueRouter({
// modes: 'history',
routes: [
{
path: '/',
redirect: '/main/home'
},
這里需要說(shuō)明的是上面修改的可能不是必要的，這里只為記錄一下知識(shí)，不喜勿噴
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了關(guān)于vue編譯版本引入的問(wèn)題的解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要給大家介紹了關(guān)于vue中實(shí)現(xiàn)打印功能的幾種方法,打印功能在實(shí)際開(kāi)發(fā)中非常常見(jiàn),通常我們需要將網(wǎng)頁(yè)中的某一部分或整個(gè)網(wǎng)頁(yè)打印出來(lái),需要的朋友可以參考下2023-09-09
antd 表格列寬自適應(yīng)方法以及錯(cuò)誤處理操作
這篇文章主要介紹了antd 表格列寬自適應(yīng)方法以及錯(cuò)誤處理操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
Vue項(xiàng)目配置在局域網(wǎng)下訪問(wèn)方式
這篇文章主要介紹了Vue項(xiàng)目配置在局域網(wǎng)下訪問(wèn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue如何使用混合Mixins和插件開(kāi)發(fā)詳解
這篇文章主要介紹了Vue如何使用混合Mixins和插件開(kāi)發(fā)詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要為大家詳細(xì)介紹了vue利用插件實(shí)現(xiàn)按比例切割圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)穿梭框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了關(guān)于路由重定向redirect的基本使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了詳解Vue.js 可拖放文本框組件的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
vue如何通過(guò)button的disabled控制按鈕能否被使用
這篇文章主要介紹了vue如何通過(guò)button的disabled控制按鈕能否被使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04