在低并发情况下，制约网页速度的往往是前端工程。加载慢一是因为网络慢，这个我们不考虑，另一个是文件过大。那么我们就要想办法压缩文件。
1、打包文件中的app.js文件放入cdn，加快页面首次加载速度
2、提取公共方法，减少js代码量
3、 提取公共组件，将统计分析的售前和售后，客户分配，客户管理，客服管理等页面的搜索条件模块化，减少了html代码量，减少了每个页面中都有的重复方法。
4、vue-router路由全部改成懒加载路由，该页面被点开时才加载该页面.vue组件，提高首页加载速度。
5、 根据页面复杂度，删除部分页面生命周期created中的window.setTimeout方法
6、将所以v-show替换成v-if，v-if如果不为真就不会加载这段代码，而v-show还是会加载这些代码，这样加快了页面加载速度。
7、 检查所有页面，删除页面中没有用到的css和data数据以及js方法，减少文件体积。
8、 使用webpack插件，将常用不需要重复打包的依赖打包出来，在index.html直接引用，减小最后上线打包出来vendor文件体积，加快首屏加载速度和打包速度
9、 对复杂页面的弹窗使用lazyRender懒渲染组件，优化该页面的打开速度。
10、webpack build打包优化
11、1对每个页面vuex进行优化，提到全局方法，减少大量重复代码
12、对页面自适应样式进行优化， 用全局css代替原来的css；减少了每个页面css代码
13、 对表格进行优化，提取出列名等写出数组，减少表格html体积
14、引入顶部进度条插件，提高页面加载体验
15、研究首页优化方法，加快单页面首页加载体验
16、同一个组件比如多个编辑页面切换时，本来的方案是使用watch.$route进行处理，经参考也可以在路由上加唯一key，保证切换路由重新渲染。参考http://www.jianshu.com/p/c315c9211146中的router-view
17、合理使用vuex，频繁切换的页面组件比如多个编辑页面，保存多个数据store，减少http请求。
项目中一些问题及处理方案：
一．单页面应用程序首屏加载过慢
查看原因：npm install cross-env --save-dev npm run analyze浏览器看信息。
在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首屏的体验。
解决方法是，将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开的目的。
外部的库文件，可以使用CDN资源，或者别的服务器资源等。
Eg:
<scriptsrc="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
// 在webpack基础配置中添加以下代码
module.exports = {
externals: {
jquery: 'jQuery'
}
1、JS文件按需加载
如果没有这个设置，项目首屏加载时会加载整个网站所有的JS文件，所以将JS文件拆开，点击某个页面时再加载该页面的JS是一个很好的优化方法。
把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
写法：
{
path: '/index',
name: 'HelloWorld',
component: (resolve) => require(['../components/HelloWorld.vue'], resolve)
},
这里用到的就是vue的组件懒加载。在router.js中，不要使用import的方法引入组件，使用require.ensure。
import index from '@/components/index'const index = r => require.ensure([],() => r(require('@/components/index'),'index'))
// 如果写了第二个参数，就打包到该`JS/index`的文件中
// 如果不写第二个参数，就直接打包在`JS`目录下。const index = r => require.ensure([],() => r(require('@/components/index')))
2、路由懒加载
懒加载的意思是当路由被访问的时候才加载对应组件，而不是在首页就全部加载，以此来提高首页反应速度
router/index.js
当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
3、代码模块化
咱们可以把很多常用的地方封装成单独的组件，在需要用到的地方引用，而不是写过多重复的代码，每一个组件都要明确含义，复用性越高越好，可配置型越强越好，包括咱们的css也可以通过less和sass的自定义css变量来减少重复代码。
4、for循环设置key值
在用v-for进行数据遍历渲染的时候，为每一项都设置唯一的key值，为了让Vue内部核心代码能更快地找到该条数据，当旧值和新值去对比的时候，可以更快的定位到diff。
5、更加理解Vue的生命周期
vue组件销毁时，会自动解绑他的全部指令及时间监听器，但是仅限于时间本身的事件，定时器的销毁需要手动去除
不要造成内部泄漏，使用过后的全局变量在组件销毁后重新置为null
6、可以使用keep-alive
keep-alive是Vue提供的一个比较抽象的组件，用来对组件进行缓存，从而节省性能。
7、节流防抖
8、图片的懒加载
使用vue-lazyload库
9、无状态的组件标记为函数式组件
可以提高性能，减少内存的消耗
<template functional>
</template>
9、合理利用计算属性的依赖缓存
二、打包层面
1、使用cdn的方式外部加载一些资源
比如vue-router、axios等Vue的周边插件，在webpack.config.js里面，externals里面设置一些不必要打包的外部引用模块。然后在入门文件index.html里面通过cdn的方式去引入需要的插件
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
}
2、不让css打包在一起(让css文件和单文件打包在一起)
默认css会打包到一个css 里面，一个就太大了
所以 在 webpack.prod.conf.js 里面把所有块打包在一起设置为false
allChunks: false,
3、不生成.map文件
在config/index.js中将productionSourceMap的值修改为false，就可以在编译时不生成.map文件了这里还要注意sourcemap的配置分 开发（dev）和线上（build）两个地方配置，开发我们就不管了，就用默认的，线上我们是不需要这个代码的。
4、gzip压缩
nginx.conf文件目录，在配置文件中添加以下语句，即可实现gzip压缩。gzip的压缩效率极高，压缩代码必备。
5、减少图片使用
因为对于网页来说，图片会占用很大一部分体积，所以，优化图片的操作可以有效的来加快加载速度。可以用一些css3的效果来代替图片效果，或者使用雪碧图来减少图片的体积。
6、按需引入
咱们使用的一些第三方库可以通过按需引入的方式加载。避免引入不需要使用的部分，无端增加项目体积。比如在使用element-ui库的时候，包括loadsh等工具库可以只引入需要用到的组件。