vue項目中用cdn優(yōu)化的方法
在我們寫項目中，優(yōu)化問題是不容忽視的，尤其是首屏優(yōu)化更是重中之重，這里介紹兩種方法優(yōu)化方法—-cdn和異步加載，異步請看 http://www.dbjr.com.cn/article/110661.htm
1。cdn
首先cdn是什么，自己百度哦
其作用是：當我們加載頁面時，需要將我們所需要的一些依賴加載到當前會話中然后再開始執(zhí)行，如果我們首屏，模塊比較多是，需要等待的時間會比較長，而且。瀏覽器內(nèi)存最多執(zhí)行四十個進程，需要等到加載完前面的才能執(zhí)行后面的代碼，如果我們采用cdn的方式來引入一些第三方資源，就可以緩解我們服務器的壓力，原理是將我們的壓力分給其他服務器點。下面是代碼的具體實現(xiàn)：
（1）首先是引入資源，這里用的是bootstrap提供的資源， 你可以登錄官網(wǎng)進入查看哦，網(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>
然后項目中需要改的地方是bulid文件夾下面的webpack.base.conf.js文件，改的地方為
module.exports = {
entry: {
app: './src/main.js'
},
externals:{
'BMap': 'BMap',
'vue': 'Vue',
'vue-router': 'VueRouter'
},
這里需要將vue和vue-router公開出去，供全局使用，這里小寫的vue和vue-router是我們引入資源時對應的名字，冒號后面大寫的名字是我們自己定義的名字和項目中要使用的名字，當然這兩個名字可以一樣，接下來就是將我們項目中引用對應資源的地方將原先的引入方式去掉，也就是我們原先用import引入的，例如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'
},
這里需要說明的是上面修改的可能不是必要的，這里只為記錄一下知識，不喜勿噴
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vue使用vue-area-linkage實現(xiàn)地址三級聯(lián)動效果的示例
很多時候我們需要使用地址三級聯(lián)動，即省市區(qū)三級聯(lián)動，這篇文章主要介紹了Vue使用vue-area-linkage實現(xiàn)地址三級聯(lián)動效果的示例，感興趣的小伙伴們可以參考一下2018-06-06
vue如何實現(xiàn)拖動圖片進行排序Vue.Draggable
這篇文章主要介紹了vue如何實現(xiàn)拖動圖片進行排序Vue.Draggable，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
我們在開發(fā)過程中，有時會遇到后端返回的文件地址和我們的網(wǎng)站不是同源的情況下，本文就介紹了vue如何根據(jù)url下載非同源文件，感興趣的可以了解一下2021-06-06
el-form-item?prop屬性動態(tài)綁定不生效問題及解決
這篇文章主要介紹了el-form-item?prop屬性動態(tài)綁定不生效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
在Vue中,我們可以使用unplugin-generate-component-name插件自動基于目錄名稱生成組件名稱,這個插件使得在大型代碼庫中找到和管理組件更加容易和直觀,這篇文章主要介紹了Vue自動生成組件示例總結(jié),需要的朋友可以參考下2023-12-12
要實現(xiàn)不同角色登錄跳轉(zhuǎn)不同的前端頁面,可以在登錄成功后,根據(jù)用戶的角色信息,使用路由跳轉(zhuǎn)到不同的頁面,這篇文章主要給大家介紹了關于前端實現(xiàn)不同角色登入展示不同頁面效果的相關資料,需要的朋友可以參考下2024-08-08
vue.js 實現(xiàn)圖片本地預覽 裁剪 壓縮 上傳功能
這篇文章主要介紹了vue.js 實現(xiàn)圖片本地預覽裁剪壓縮上傳功能,代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-03-03
vue3.0 CLI - 2.3 - 組件 home.vue 中學習指令和綁定
這篇文章主要介紹了vue3.0 CLI - 2.3 - 組件 home.vue 中學習指令和綁定的相關知識，本文通過實例代碼相結(jié)合的形式給大家介紹的非常詳細 ,需要的朋友可以參考下2018-09-09
解決vue2 在mounted函數(shù)無法獲取prop中的變量問題
這篇文章主要介紹了vue2 在mounted函數(shù)無法獲取prop中的變量的解決方法 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了詳解vue的diff算法原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05