在vue中如何使用cdn優化

本篇文章主要介紹了vue專案中用cdn優化的方法，現在分享給大家，也給大家做個參考。

在我們寫專案中，優化問題是不容忽視的，尤其是首屏優化更是重中之重，這裡介紹兩種方法優化方法—-cdn和異步加載，異步請看// www.jb51.net/article/110661.htm

1。 cdn

首先cdn是什麼，自己百度哦

其作用是：當我們載入頁面時，需要將我們所需要的一些依賴載入到目前會話中然後再開始執行，如果我們首屏，模組比較多是，需​​要等待的時間會比較長，而且。瀏覽器記憶體最多執行四十個進程，需要等到載入完前面的才能執行後面的程式碼，如果我們採用cdn的方式來引入一些第三方資源，就可以緩解我們伺服器的壓力，原理是將我們的壓力分給其他伺服器點。以下是程式碼的具體實作：

（1）首先是引入資源，這裡用的是bootstrap提供的資源， 你可以登入官網進入查看哦，網址：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'
  },

這裡需要說明的是上面修改的可能不是必要的，這裡只為記錄一下知識，不喜勿噴

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

在JavaScript中如何判斷NaN

#如何使用jQuery實作滑鼠響應式透明度漸層動畫效果

在jQuery中如何實作滑鼠響應式淘寶動畫效果

#詳細解讀vue-admin與後端(flask)分離結合

#在Vue webpack中詳細講解基礎設定

在nodejs express環境中如何將建立多人聊天室

使用vue2.0如何實現前端星星評分功能組件

以上是在vue中如何使用cdn優化的詳細內容。更多資訊請關注PHP中文網其他相關文章！