1. 程式人生 > >vue專案中用 cdn 優化

vue專案中用 cdn 優化

在我們寫專案中,優化問題是不容忽視的,尤其是首屏優化更是重中之重,這裡介紹兩種方法優化方法—-cdn和非同步載入,非同步請看
http://blog.csdn.net/gang456789/article/details/78224751
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'
    },

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