vue全家桶
我们习惯用vue-cli搭建脚手架，再配合vue-router控制路由，vuex控制状态及复杂组件通讯，实现顺畅的spa应用，但是往往在项目应用插件框架时后首屏加载时间非常长。故此可做一些优化。
缩小webpack打包生成的包的大小
这里我们需要尽可能的减少生产环境下依赖的库数量，比如element如果可以的话需要什么组件就引入什么组件，而不是在main.js全局引入。开始优化的时候，就不知道从何处优化起，而且根本不知道生成的包中哪个依赖占据着空间，哪个库占用的空间最多。 所以有个webpack-bundle-analyzer的分析工具。安装：
$ npm install --save-dev webpack-bundle-analyzer
在webpack.prod.conf.js中配置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins: [
new BundleAnalyzerPlugin(
{
analyzerMode: 'server',
analyzerHost: '127.0.0.1',
analyzerPort: 8888, // 运行后的端口号
reportFilename: 'report.html',
defaultSizes: 'parsed',
openAnalyzer: true,
generateStatsFile: false,
statsFilename: 'stats.json',
statsOptions: null,
logLevel: 'info'
}
),
]
这样后配置完成了，正常npm run build 结束后，就会自动打开一个打包生成文件的模块组成图在默认浏览器中，图中面积大的就是占据空间大的模块。
服务端渲染
服务端渲染不同于后端渲染,服务端渲染只是把当前的前端框架中的一部分js代码放到服务器上渲染，加载到浏览器上的html就不是一个空页面，这样可以减少首页的白屏时间，同时提高被搜索引擎检索的机会。服务端渲染有不少的局限，例如它的服务端必须依靠node服务器，我们可以使用使用基于vue的nuxt.js脚手架去开发，会减去繁琐的配置过程。
使用cdn或预加载
将一部分静态的页面直接渲染成html写在生成的index.html中，这种方式在加载完index.html后，就会有界面展示出来，无需等待加载js代码后再去渲染，所以这种方式也可以显著的减少首屏加载时间，也可以提高被搜索引擎检索的机会，同时预渲染的配置很简单，容易上手。
或者使用cdn把一些必要的库在index.html里面引入进去这样也能加快加载速度。
动态路由分块加载
这种优化，就是将每个组件的js代码独立出来，在使用到这个组件时，才向服务器请求文件，并且请求过一次后就会缓存下来，再次使用到这个组件时，就会使用缓存，不再发送请求。
配置很简单，只需要在vue-router中添加一些简单的配置即可
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);
export default new Router({
mode: 'history',
linkActiveClass: 'router-link-active',
routes: [
{
path: '/',
// 这里只需要把原来从外部引入的组件换成以下的语句就可以了
component: resolve => require(['../components/(你的组件)'], resolve)
},
]
})
