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 } ] })