面试官提出这个问题 ，我们进行分析性能优化的几个点 不可控的方面是，用户的网络情况，使用的浏览器（浏览器IE已经被抛弃了，不用纠结）
可控的方向，
第一点：代码的优化（代码的书写，简洁，可复用度高，可以讲组件化开发）。
第二点：访问资源的大小，相同的功能实现，资源越小，访问速度越快。
第三点：首屏中必须要加载的资源，怎么处理？
使用cdn引入（比如第三方的依赖，这些我们不会去改动，vue.js,element.js...第三方资源）
第四点：如果有些第三方资源不使用cnd引入第三方的方式，需要在main.js中使用资源懒加载
比如我们只是用了element 中的一部分功能 el-table el-input
下面这种全部引入的方式,下面这种就有点小才大用了，毕竟这么大的库，我们只用一两个功能点
不推荐
improt Element from 'element'
Vue.use(Element)
推荐：使用资源按需加载
improt {
el-table,
el-input，
...(如果有其他的，继续这样引入就可以了)
} from 'element'
Vue.use({
el-table,
el-input,
...(如果有其他的，继续这样引入就可以了)
})
引入时 上下对应就好了 使用到的我们才引入
第五点：路由懒加载
常规写法
引入路由,项目运行会直接加载所有打包后的路由
import index from '@/pages/index'
{
path：'/index',
name：'index',
component:index
}
路由懒加载，项目运行会在使用时加载对应的资源模块
{
path：'/index',
name：'index',
component:()=> import(/* webpackChunkName: pages */ '@/pages/index')
}
/* webpackChunkName: pages */
webpack 打包时会按照路由模块命名进行打包
pages 就是路由的模块名
这里只是举例，我们不同的路由模块可以取不同的模块名
当webpack 构建项目时，会根据不同的模块名，打包成不同的路由模块
在项目运行时，用到才会去进行加载
第六点：开启gzip 压缩 使用到的插件comperssion—webpack-plugin
vue-cli 构建的项目 2.0 已经帮我们配置好了gizp
(默认配置只会对js文件进行gzip处理，如果需要对css/img等资源进行处理，
我们增加配置向就可以了，还可以设置大小，比如多大字节以上的文件才进行gzip处理，
太小的文件就没必要进行gzip处理)
开启gzip操作步骤：
在config 文件夹下面的 index.js 中 productionZgip:false 改成true 即可
当我们打包后dist 文件夹下的 js 文件都会多出一个.js.gz 文件
部署到服务器后 在服务器nginx 上开启 gizp 服务就可以了
当项目运行时，访问资源时会访问gzip的资源
总结：
性能优化分为一下几个方面：
书写方面:代码要简洁(养成日常习惯，成优秀的程序员)，
路由加载：单页面应用，路由懒加载，
请求资源方面：资源小，响应快。
第三方的资源尽量使用cdn，减少自己服务器的压力，不能cdn，就使用按需加载，不要加载整个插件
项目打包方面：打包后项目要小。
使用gzip 压缩我们的代码（compression-webpack-plugin），
当然webpack还有其他配置也是优化js的，比如tree shacking（学名，树摇）配置以后，
有两个必要条件 ：es6 模块话语法 production生成环境 才起作用，
主要是打包时检测一些无用的就是代码，打包过程中无效js代码不会被打包到项目中，减少项目的体积
使用cdn引入第三方资源时会用到externals，项目打包时不会把本地中使用的第三方库打包进去
externals:['Vue','element'] 理解成项目打包不打包某些文件，文件通过cnd形式加载
其他方面小细节就不用说了，以上这些差不多完成了项目优化，
如果面试在细问，其他方面，也没必要瞎扯，完成上面这些基本差不多了，
讲的要有条例，这基本就是整个项目的优化，
不单单是一个首屏加载的优化，他在问你当他是在搞事情，
扣细节几天都讲不完，大方向搞清楚就好了
常用的优化：
首屏图片处理 使用图片懒加载 视图区域展示才加载，
防抖 节流 怎么使用
文件上传大文件处理方式：分片上传 断点续传
把这些搞懂，看看文档 自己写写代码测试 就差不都了，
面试先讲上面的大方向处理方式
问细节 就把常用的讲一讲怎么实现，基本就OK了
码字不易 多多点赞 希望对大家性能优化有个清楚的认识
