對於單頁應用，要在乙個頁面上為使用者提供產品的所有功能，在這個頁面載入的時候，首先要載入大量的靜態資源，這個載入時間相對比較長。所以我們需要做一些相應的優化，減少響應時間，盡快把首屏顯示出來。
1、壓縮**
無論是否為單頁應用，**的壓縮都是要做的。
對於vue-cli生成的專案，在webpack配置檔案中使用了uglifyjsplugin進行**的壓縮：
plugins: [
......
new uglifyjsplugin(
},sourcemap: config.build.productionsourcemap,
parallel: true
}),......
]2、框架和外掛程式按需載入
對於專案中用到的一些ui框架，比如 onsen ui 、mint ui 等等。如果我們只使用框架的部分元件，那麼可以不要引入整個框架，按需引入用到的元件。
以mint ui為例：
// 引入全部元件
import mint from 'mint-ui';
import 'mint-ui/lib/style.css'
vue.use(mint);
// 按需引入部分元件
import from 'mint-ui';
vue.component(cellswipe.name, cellswipe);
對於一些外掛程式，比如表單驗證外掛程式vuelidate，如果只是在個別元件中用的到，也可以不要在main.js裡面引入，而是在元件中按需引入
// main.js中全部引入
import vue from 'vue'
import vuelidate from 'vuelidate'
vue.use(vuelidate)
// 元件中按需引入
import from 'vuelidate'
3、框架和外掛程式從cdn中引入
在開發過程中，我們其實不會要去更改這些第三方庫，所以可以把它們放到cdn中，不參與打包。
在 index.html 中使用cdn引入
在webpack.config.js（webpack.base.config.js）中新增externals，表示這些檔案可以被引用，但不參與打包。
externals:
這樣配置之後，我們依然可以用import vuex from 'vuex'來引入模組。
具有外部依賴(external dependency)的 bundle 可以在各種模組上下文(module context)中使用，例如 commonjs, amd, 全域性變數和 es2015 模組。
externals也支援string、array、object、function和regex等各種語法，詳情參見webpack externals中文文件。
4、路由懶載入
官方文件在此，更詳細的內容參見文件。
路由懶載入也就是 把不同路由對應的元件分割成不同的**塊，然後當路由被訪問的時候才載入對應元件。
結合 vue 的非同步元件和 webpack 的**分割功能，輕鬆實現路由元件的懶載入。
在router中，我們平時是這樣引入元件的：
import foo from './foo.vue'
文件中指出，如下定義乙個能夠被 webpack 自動**分割的非同步元件
const foo = () => import('./foo.vue')
在路由配置中什麼都不需要改變，只需要像往常一樣使用 foo：
const router = new vuerouter( ] })
對於單頁應用，要在乙個頁面上為使用者提供產品的所有功能，在這個頁面載入的時候，首先要載入大量的靜態資源，這個載入時間相對比較長。所以我們需要做一些相應的優化，減少響應時間，盡快把首屏顯示出來。
1、壓縮**
無論是否為單頁應用，**的壓縮都是要做的。
對於vue-cli生成的專案，在webpack配置檔案中使用了uglifyjsplugin進行**的壓縮：
plugins: [
......
new uglifyjsplugin(
},sourcemap: config.build.productionsourcemap,
parallel: true
}),......
]2、框架和外掛程式按需載入
對於專案中用到的一些ui框架，比如 onsen ui 、mint ui 等等。如果我們只使用框架的部分元件，那麼可以不要引入整個框架，按需引入用到的元件。
以mint ui為例：
// 引入全部元件
import mint from 'mint-ui';
import 'mint-ui/lib/style.css'
vue.use(mint);
// 按需引入部分元件
import from 'mint-ui';
vue.component(cellswipe.name, cellswipe);
對於一些外掛程式，比如表單驗證外掛程式vuelidate，如果只是在個別元件中用的到，也可以不要在main.js裡面引入，而是在元件中按需引入
// main.js中全部引入
import vue from 'vue'
import vuelidate from 'vuelidate'
vue.use(vuelidate)
// 元件中按需引入
import from 'vuelidate'
3、框架和外掛程式從cdn中引入
在開發過程中，我們其實不會要去更改這些第三方庫，所以可以把它們放到cdn中，不參與打包。
在 index.html 中使用cdn引入
在webpack.config.js（webpack.base.config.js）中新增externals，表示這些檔案可以被引用，但不參與打包。
externals:
這樣配置之後，我們依然可以用import vuex from 'vuex'來引入模組。
具有外部依賴(external dependency)的 bundle 可以在各種模組上下文(module context)中使用，例如 commonjs, amd, 全域性變數和 es2015 模組。
externals也支援string、array、object、function和regex等各種語法，詳情參見webpack externals中文文件。
4、路由懶載入
官方文件在此，更詳細的內容參見文件。
路由懶載入也就是 把不同路由對應的元件分割成不同的**塊，然後當路由被訪問的時候才載入對應元件。
結合 vue 的非同步元件和 webpack 的**分割功能，輕鬆實現路由元件的懶載入。
在router中，我們平時是這樣引入元件的：
import foo from './foo.vue'
文件中指出，如下定義乙個能夠被 webpack 自動**分割的非同步元件
const foo = () => import('./foo.vue')
在路由配置中什麼都不需要改變，只需要像往常一樣使用 foo：
const router = new vuerouter( ] })
VUE單頁應用首屏載入速度優化方案
單頁應用會隨著專案越大，導致首屏載入速度很慢！以下給出在下知道的幾種優化方案 使用cdn資源,減小伺服器頻寬壓力 路由懶載入 將一些靜態js css放到其他地方 如oss 減小伺服器壓力 按需載入三方資源，如iview,建議按需引入iview中的元件 使用nginx開啟gzip減小網路傳輸的流量大小...
Vue首屏載入優化
vue首屏載入優化 單頁面應用的乙個問題就是首頁載入東西過多，載入時間過長。特別在移動端，單頁面應用的首屏載入優化更是繞不開的話題。下面我會寫出我在專案中做的一些優化，希望大家能夠相互討論，共同進步。分析載入慢問題 1.webpack bundle analyzer 分析 首頁我們來看看沒有經過任何...
Vue首屏渲染白屏優化方案
然後找到 build webpack.base.conf.js 檔案，在 module.exports 中新增以下 externals 找到 config index.js，修改為 productionsourcemap false 這個優化是兩方面的，前端將檔案打包成.gz檔案，然後通過nginx...