loeyo资料

本文主要介绍loeyo资料 方法和在新技术下所面对的“挑战”,方便大家深入理解loeyo资料 过程。本文也将分享loeyo资料 所遇到的问题和应对策略,怎么解决怎么做的问题。
通过深入本文可以理解代码原理,进行代码文档的下载,也可以查看相应 Demo 部署效果。

  在你的项目使用了Vue的路由懒加载、Vue使用CDN引用项目组件,减少项目体积 后,还是觉得项目加载速度慢,效果不尽如人意的时候,还有一个“瘦身项目”可以完成,那就是利用nginx和webpack来使用gzip压缩功能。

通常来讲更小的体积就意味着更快的加载速度,也就对应着更好用户体验。整个过程大体分为两步,废话不多讲,开始

 

一、 webpack插件 compression-webpack-plugin 

  Vue压缩功能的实现主要依赖于webpack的一个插件compression-webpack-plugin ,这个插件可以将npm run build之后的.js .css(看自己配置)文件,打包成.js.gz .css.gz文件。

首先需要安装compression-webpack-plugin依赖

  npm install –save-dev compression-webpack-plugin@1.1.2

这里推荐使用1.1.2版本,因为高版本的插件在使用时会报ES6语法错误。下载此插件时可能需要翻墙,可以使用下方命令配置npm 代理

  npm config set proxy http://username:password@ip:port

之后需要打开项目中的prductionGzip选项,具体路径在config/index.js build下:

loeyo

打开之后还需要配置bulid/webpack.prod.conf.js 文件,找到下图所示位置将asset更换为filename:

loeyo

至此,vue部分的配置完成。可以使用npm run build检验一下是否配置成功,如果配置没有问题打包结果与下图应该是比较类似的:

loeyo

像这些xxxxxx.js.gz就是打包之后的文件了,可以看到压缩率还是比较可观的

 

二、nginx配置

  在配置完Vue部分后直接部署到nginx上是不会生效的,还必须打开nginx的gzip功能才可以。这里以nginx-1.13.0为例,首先需要确认当前nginx是否拥有

gzip模块,一般情况下都会默认安装对应。运行以下命令

  nginx -V 
返回结果中会包含当前nginx启用了那些模块

loeyo

如果返回结果中不包含gzip模块的话,可以重新编译nginx并安装相对应模块,找到nginx源码文件包,运行

  ./configure –with-所需要安装的模块名 

命令运行成功后执行make命令,千万不要执行make install!执行make install会直接将之前安装的nginx给覆盖掉。

make命令执行成功之后会在objs目录下生成nginx可执行文件,直接使用此nginx替换掉原本的nginx即可。

在确认模块安装完毕之后,修改conf/nginx.conf文件,加入如下内容

#开启gzip功能 gzip on;  #开启gzip静态压缩功能 gzip_static on;  #gzip缓存大小 gzip_buffers 4 16k; #gzip http版本 gzip_http_version 1.1; #gzip 压缩级别 1-10  gzip_comp_level 5; #gzip 压缩类型 gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding,建议开启
gzip_vary on;

配置完毕之后重启nginx即可

 

三、验证配置结果

  nginx配置成功之后,再次访问对应网站返回的应该是对应的gzip资源,可以利用chrome查看返回结果

loeyo

看到content-Encodeing: gzip 就代表gzip已经成功开启了

 

四、gzip_static的作用

  nginx在设置了gzip on 后就已经打开了gzip压缩功能,不过这时候nginx所使用的是动态压缩。在动态压缩的情况下nginx会自动的将文件压缩成.gz文件,这时候就算不配置vue也能达到一样的效果。

但是动态压缩无疑会占用服务器的资源来进行此操作。

  相对的nginx提供了静态压缩模式,也就是gzip_static,在这个模式下nginx会去寻找对应文件的.gz文件,只有.gz文件不存在的时候才会去压缩对应文件。这样就不会过度占用服务器资源。

gzip_static功能依赖http_gzip_static_module 模块,一般不会默认安装此模块,可以使用上文提到的方法安装。

  所以使用动态压缩还是静态压缩各位读者可以自行决定

loeyo资料部分资料来自网络,侵权毕设源码联系删除

区块链毕设网(www.qklbishe.com)全网最靠谱的原创区块链毕设代做网站
部分资料来自网络,侵权联系删除!
资源收费仅为搬运整理打赏费用,用户自愿支付 !
qklbishe.com区块链毕设代做网专注|以太坊fabric-计算机|java|毕业设计|代做平台 » loeyo资料

提供最优质的资源集合

立即查看 了解详情