网站性能优化

启用HTTP/2

HTTP/2协议提高了资源访问效率、允许同时发起无数个请求，并且响应可以同时返回和访问更加安全等优点。HTTP/2 采用二进制格式传输数据，相比HTTP 1.x 的文本格式更加高效；同时HTTP/2的多路复用使同一个域名只需要占用一个 TCP 连接，消除了因多个 TCP 连接而带来的延时和内存消耗等；

1.0> 在配置Nginx时，在 Listen 处添加 http2 即可启用 HTTP/2 协议

listen 443 ssl http2

2.0> 在Chrome中查看请求是否为http2协议

a. 显示请示协议

b. 查看请示协议类型

服务器开启GZIP

以Nginx为例，若开启了GZIP，Nignx就会在传输时对css、js 、xml、html 等文件进行压缩，以提高访问速度、节约网络流量；但GZIP对图片、视频等多媒体和大文件压缩效果不好，所以这些资源没必要压缩。

开启GZIP后，服务器会将css、js 、xml、html 等资源压缩为gz格式，并在响应头中添加“Content-Encoding=gzip”，浏览器通过此响应头获知资源为GZIP编码格式后，会先对资源进行解析，然后再进行展示或后续处理；

开启GZIP会消耗一定的cpu资源。

Vue项目GZIP压缩

Nginx在传输时进行GZIP压缩，会带来一定的CPU开销，也会对资源加载性能产生微弱影响；因此，可在Vue打包项目时，通过 CompressionWebpackPlugin 插件将资源提前压缩为gz格式；

但服务器必须在响应头中添加“Content-Encoding=gzip”，这样浏览器才能识别资源为“gzip”编码格式，进而才能进行解析。

按需加载组件和懒路由

a>. 不要在 main.js 中全局引入组件，而应该在具体的页面中仅引入所需的组件；

b>. 配置页面路由时，使用懒加载

使用CDN

相比其它性能优化，CDN才是真正的刹手锏；可通过以下两种方式使用CDN加速：

方式一：项目打包后，将所有引用的资源文件通过一个脚本自动上传至CDN，例如：https://segmentfault.com/a/1190000018915895

方式二：直接将项目托管到对象存的储静态网站中，并开启全站CDN

图片优化

图片转为base64后，体积会增加30%，但使用gzip压缩后能得到差不多相似的大小；

将图片编成base64插入到页面中，会造成页面体积明显增加，影响页面加载和渲染速度，同时可能造成编辑器卡顿，但能够减少请求次数；

https://segmentfault.com/a/1190000040062155

精灵图

多图合并，并使用background-size、background-origin等属性进行定位；

大数据列表

复用加载，类似移动端IOS原理

其它

Vue项目打包编译后，代码都是经过压缩加密的；所以如果运行时报错，就很难定位到错误位置；但Vue项目打包后默认会生成一个map文件，该文件记录了代码编译前后的对应关系，有了此文件就能很容易定位到编译后代码的运行错误。

在 vue.config.js 中配置 productionSourceMap 选项就能控制打包时是否生成 map 文件；是否生成map文件，仅影响项目打包速度，对项目的加载运行速度没有任何影响；因为map文件是给浏览器调试器用的，只有DEBUG时才会载，但仍然建议在生产环境下将 productionSourceMap 设置 false，以避免别人通过map文件反编译出源码。