网站性能优化

启用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


其它

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

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



举报

© 著作权归作者所有


1