Vue 單頁應用 的 首屏優化

對於單頁應用，要在一個頁面上爲用戶提供產品的全部功能，在這個頁面加載的時候，首先要加載大量的靜態資源，這個加載時間相對比較長。因此咱們須要作一些相應的優化，減小響應時間，儘快把首屏顯示出來。

一、壓縮代碼

不管是否爲單頁應用，代碼的壓縮都是要作的。 
對於vue-cli生成的項目，在Webpack配置文件中使用了UglifyJsPlugin進行代碼的壓縮：

//webpack.prod.conf.js
plugins: [
......
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
......
]

二、框架和插件按需加載

對於項目中用到的一些UI框架，好比 Onsen UI 、Mint UI 等等。若是咱們只使用框架的部分組件，那麼能夠不要引入整個框架，按需引入用到的組件。 
以Mint UI爲例：

// 引入所有組件
import Mint from 'mint-ui';
import 'mint-ui/lib/style.css'
Vue.use(Mint);

// 按需引入部分組件
import { CellSwipe } 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 { validationMixin } from 'vuelidate'

三、框架和插件從cdn中引入

在開發過程當中，咱們其實不會要去更改這些第三方庫，因此能夠把它們放到cdn中，不參與打包。 
在 index.html 中使用cdn引入

<script src="https://cdn.example.com/vue/2.5.3/vue.js"></script>
<script src="https://cdn.example.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.example.com/axios/0.17.1/axios.min.js"></script>
在webpack.config.js（webpack.base.config.js）中添加externals，表示這些文件能夠被引用，但不參與打包。

externals: {

'vue': 'Vue',

'vuex': 'Vuex',

'axios': 'axios' }

這樣配置以後，咱們依然能夠用import Vuex from 'vuex'來引入模塊。

具備外部依賴(external dependency)的 bundle 能夠在各類模塊上下文(module context)中使用，例如 CommonJS, AMD, 全局變量和 ES2015 模塊。

externals也支持string、array、object、function和regex等各類語法，詳情參見webpack Externals中文文檔。

四、路由懶加載
官方文檔在此，更詳細的內容參見文檔。

路由懶加載也就是 把不一樣路由對應的組件分割成不一樣的代碼塊，而後當路由被訪問的時候才加載對應組件。
結合 Vue 的異步組件和 Webpack 的代碼分割功能，輕鬆實現路由組件的懶加載。
在router中，咱們平時是這樣引入組件的：
import Foo from './Foo.vue'

文檔中指出，以下定義一個可以被 Webpack 自動代碼分割的異步組件

const Foo = () => import('./Foo.vue')

在路由配置中什麼都不須要改變，只須要像往常同樣使用 Foo：

const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ] })